JGU ImageMap

Image maps are graphics in which several links to other areas of a website are stored. An example of using an image map could be a map. Of course, there are many more examples of use.

 

Try it out : → Imagemap Demo

Create ImageMap (Get coords)

But how do you create such a map ? This can be accomplished very easily with the graphic editing tools like GIMP.

An easy way to create ImageMaps is the online editor "image-map.net". To create a new ImageMap, just upload an image or specify a source (URL) for an image.

At the bottom you can create rect, poly and circle shapes relatively easily. When you have finished editing, you can view the contents of the ImageMap by clicking on "Show Me the Code".

Sample:

 

GIMP already provides required functionality. GIMP is distributed under the GNU license and can be downloaded for free at https://www.gimp.org/ but also note the possibility to install GIMP via ZDV apps: https://apps.zdv.uni-mainz.de.

Step 1: Select and convert graphic for the image map.
First, use GIMP to open the graphic you want to convert to an image map. Once the graphic is open, you can select the "Filter" menu in the main menu of GIMP. Then go under the category "Web" on The menu item "Image Map". Now GIMP opens another windows where you can create the image map.

Step 2: Convert graphics to image map and insert links
Once the new window opens, you can start creating the image map. GIMP offers a selection of different selection tools in the left navigation bar. With their help you can make square or circular selections. The third icon gives you the option of selecting a polygonal area.

Step 3: Include Image Map in Website
When you finish creating the image map, save it with GIMP. GIMP creates a file with the extension ".map". You can now open this file. Under Windows you can do this for example use the "Editor" (notepad.exe). The contents of the file provide you with the information, ie the coordinators for your image map, that you need for embedding in WordPress.

Sample:

(Quelle: "BEFORE AFTER GRANDMA" https://www.naolito.com, 2019)

ImageMap in WordPress (Use coords)

The JGU-ImageMap plugin renders SVG-Imagemaps from any worldwide reachable image sources.

  • Create an ImageMap as explained above to get the coordinates of the elements.
  • Upload your image in WordPress or in any publicly accessible location on the Internet.

Now use this image URL and the coordinates with the following shortcode pattern:

This means that you can simply change the lines above in the example as follows:

Before:

After

Values jgu_imagemap

Value Description
src image src url

Values jgu_imagemap_item

Value Description
shape shape type (circle,poly,path)
coords The coords attribute is used together with the shape attribute to specify the size, shape, and placement of a link in an object or img element. The coordinates of the top-left corner are 0,0.
x1,y1,x2,y2 If the shape attribute is set to "rect", it specifies the coordinates of the top-left corner and the bottom-right corner of the rectangle
x,y,radius If the shape attribute is set to "circle", it specifies the coordinates of the circle center and the radius
x1,y1,x2,y2,..,xn,yn If the shape attribute is set to "poly", it specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser must add the last coordinate pair to close the polygon
url shape link
background_color shape background base color
stroke_color shape border color
stroke_width shape border width
debug enable debug output

Sample