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:
<!-- Image Map Generated by https://www.image-map.net/ --> <img src="imagemap-samplefile-1024x538.png" usemap="#image-map"> <map name="image-map"> <area shape="rect" coords="142,31,501,272" href="https://www.uni-mainz.de" /> <area shape="poly" coords="89,408,337,365,575,431,478,619,81,593" href="https://www.uni-mainz.de" /> <area shape="circle" coords="910,195,217" href="https://www.uni-mainz.de" /> </map>
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:
<area shape="rect" coords="142,31,501,272" href="https://www.uni-mainz.de" /> <area shape="poly" coords="89,408,337,365,575,431,478,619,81,593" href="https://www.uni-mainz.de" /> <area shape="circle" coords="910,195,217" href="https://www.uni-mainz.de" />
(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:
[jgu_imagemap src="image URL"]
[jgu_imagemap_item shape="[rect|poly|circle]" coords="comma-separated list from Gimp e.g. 142,31,501,272" url="target-URL" background-color="#fff" stroke-color="#000" stroke-width="3" title="text"]
[/jgu_imagemap]
This means that you can simply change the lines above in the example as follows:
Before:
<area shape="rect" coords="142,31,501,272" href="https://www.uni-mainz.de" /> <area shape="poly" coords="89,408,337,365,575,431,478,619,81,593" href="https://www.uni-mainz.de" /> <area shape="circle" coords="910,195,217" href="https://www.uni-mainz.de" />
After
[jgu_imagemap src="//www.blogs.uni-mainz.de/wp-content/uploads/2019/05/imagemap-samplefile.png"]
[jgu_imagemap_item shape="rect" coords="142,31,501,272" url="https://www.uni-mainz.de"]
[jgu_imagemap_item shape="poly" coords="89,408,337,365,575,431,478,619,81,593" url="https://www.uni-mainz.de"]
[jgu_imagemap_item shape="circle" coords="910,195,217" url="https://www.uni-mainz.de"]
[/jgu_imagemap]
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
[jgu_imagemap src="//www.blogs.uni-mainz.de/wp-content/uploads/2019/05/imagemap-samplefile.png"]
[jgu_imagemap_item shape="rect" coords="142,31,501,272" url="https://www.uni-mainz.de" background_color="#fff" stroke_color="#555" stroke_width="1" title="Google"]
[jgu_imagemap_item shape="circle" coords="910,195,217" url="https://www.uni-mainz.de" background_color="#fff" stroke_color="#fff" stroke_width="10" title="Text"]
[jgu_imagemap_item shape="poly" coords="89,408,337,365,575,431,478,619,81,593" url="https://www.uni-mainz.de" background_color="#fff" stroke_color="#000" stroke_width="3" title="Text"]
[/jgu_imagemap]