Images on web pages are more interesting when the user can interact with them. In this post, we will show how to make images more interesting by using ImageMapster, an open-source jQuery plugin that activates HTML image maps. We will also go over how to use some of the more nifty features of ImageMapster, including customizable tool tips, area highlighting, and dynamic image map scaling.
An image map is an HTML <map> element containing lists of coordinates from an image grouped together in <area> tags. How do we get these coordinates? Well, a quick way to obtain the coordinates to make your own image map is to use a free image map generator web tool. My favorite is Easy Imagemap Generator. All you have to do is upload the image and select the desired area. The coordinates are then generated for each selected area automatically. Let’s pick an image to upload.
We took this adorable picture of Spongebob and Plankton during our lunch break out in Jellyfish Fields.
Now, we all love Spongebob, but this image doesn’t tell the whole story. What do the letters, “F”, “U”, and “N” stand for? No one knows except us, so let’s share our experience! We can start by uploading the picture into Easy Imagemap Generator and creating an image map. We should outline areas over the letters “F”, “U”, and “N” and one rough area between Spongebob and Plankton, since we want to highlight something they said together during the picture.
You should now have HTML code for an image map that looks similar to this:
The code that is generated from the Easy Imagemap Generator site is not quite complete for our needs. Let’s replace each title with an id instead. We can also get rid of the id for the <map> element, since we won’t be using it for this project.
Great! Now we have a working image map. Let’s include our desired image in our HTML.
Our code so far is:
ImageMapster requires jQuery. Luckily, Google hosts the jQuery library, so we can just add their hosted URL into our header. We also need to download the ImageMapster script found on its GitHub page and include that in our header as well, so we can start using it. The script file ending in “.min.js” is just a compressed version of the regular “.js” file, so either can be used. The regular “.js” script file will display more readable errors, so use that one during development, and then switch to the “.min.js” script file during production for performance improvements.
These options will add a transparent shade on mouseover to each area to highlight its importance to the user. So, why is the fill: false option included for the id4 key? Well, id4 represents the area between Spongebob and Plankton. We don’t want this area highlighted on mouseover. That would just look ugly. We have staticState: false, because we don’t want users to be able to select the imagemap area. Selecting that area would leave it highlighted until the user selects it again, which serves no purpose for us. Now, let’s add a custom tooltip on mouseover too!
We need to create four string variables for each area that needs a tooltip.
We also have to add the following options to show the tooltips.
The toolTipContainer option could have been left out, but then we would be using the boring, default styling for tooltips. This style will make the tooltips look more modern and classy.
Lastly, we need to select the tooltip text we are going to use for each area. Here is our finished ImageMapster function. Don’t forget to include the jQuery and ImageMapster scripts in the header as we did previously.
Here is the finished product.
We have a pretty long function and working code, but we’re still not finished telling the story. Watch what happens if we change the size of the browser window.
Here is our finished code to get ImageMapster fully working!
The resize() function does the actual resizing to fit the image within the boundaries of the window. The onWindowResize() function tracks the window resizing events. Now when the browser window resizes, the image and its image maps will resize along with it! Plus, the tooltips and area highlighting still work!
We are finally done telling our story! ImageMapster also provides many functional demos and great documentation. There are also more demos on JSFiddle under the “Fiddle With It” section on the ImageMapster page, which show you how to do some nifty tricks and techniques. Hopefully this provided a solid introduction to the ImageMapster tool. Remember, don’t just settle for that static image. Make it interactive!