In this tutorial we will create a clickable HTML5 image map, representing the world map with “on hover” showing the location names and colours. You can see the final product demo right here: http://mymancave.org/demos/image-map.html
This is done in pure HTML with a touch of JS for selecting images to change on mouse hover.
First of all, lets take a look at the code, and then I’ll try to walk through a little bit.
Now to explain what is going on here a little bit.
The relationship between the “default” image and the map, is created on line 30-31 using the “usemap” attribute for the image.
The default image is just a layout, or drawing if you will, of world map. With on mouse hover will be the continents shown and highlighted.
The map has multiple Poly Areas representing the continents. The marking of the areas is done using image-map.net website. Similarly, this step could be done much simpler, using “rect” area types, but I wanted to be as precise as possible.
Finally, we need on mouser over and out events for our HTML5 image map.
Each area has onmouseover and onmouseout events. Which are responsible for changing images on hover. And this is where the simple JS function written in the head section comes into play. So, basically onmouseover we are loading a new, corresponding image for that area, replacing the default, empty image, and onmouseout will takes us back to the default image.
Each continent has its own area, onmouse events and images, with the same logic.
— Do you see an error, typo, broken link, etc? Please let me know in the comments —
Download Source Code