Image Map Tutorial

For my final project, I came across a great way to create interactive images of all kinds. Image mapping is a somewhat ancient method of making interactive images or fields of a webpage. In my final project for class, I have created an image map to emulate a microfiche reader! Check out the reference for the code here! (I tried to embed it but the site is http instead of https)

We’ll begin by selecting an image to map.

If you’re feeling lazy and don’t want to implement the steps below, use image-map.net/ to generate an image map with an image of your choice.

If you’re a real hardcore coder, we’ll start by using a ruler software of some sort to find and save the coordinates of your desired regions for later on.

Next, we’ll create an image element <img> with the alt and usemap attributes. usemap requires a # before the name of your map, don’t ask why, it just does.

<img src="ImageMap.png" alt="Alt Name" usemap="#image-map">

Finally, create a <map> element with the name attribute being the same as the usemap attribute from your image without the #. You may now populate your add your regions with <area> tags, which will represent the clickable areas of your map.

<map name="image-map">
    <!-- x,y of center of circle and radius -->
    <area title="" coords="517,751,25" shape="circle">
    <!-- x,y of top left and bottom right points -->
    <area title="" coords="620,693,544,658" shape="rect">
    <!-- x,y in straight lines to create a polygon -->
    <area title="" coords="378,705,377,740,344,727,344,706" shape="poly">
</map>

Image maps allow for three types of regions, polygons, rectangles, circles and default(which is just the whole image). Each has a different way of creating a region which can be found in the comments on the code block above.

Map usage is actually pretty extensive. The simplest use is for linking other pages. This takes you adding the href=”” attribute in an area tag. Many other types of events can be called with image maps as well. Onclick is the most common as it allows you to click and call a javascript function. Some of the other event types can be found here.

At this point you’ve got an image map and can move forward in making it interactive in whichever way you’d like.

Responsive Mapping

I stumbled upon a way to make maps responsive. A big downside to image maps is that they require exact coordinates and they aren’t compatible with the responsive ways of the modern internet. This method uses javascript exclusively and is a public GitHub repo from stowball. Download the repository code and add it to your workspace.

After setting your maximum width and height parameters through CSS(since the javascript setting will not work), you will include the code below in your image map html file. Now, when you change the size of your window you will see that the image map regions will persist and work as intended! Congrats!

<!-- Responsive Image maps -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- Responsive Image maps -->
    <script src="DOWNLOADED REPO PATH HERE/jquery.rwdImageMaps.js"></script>
    <script>
        $(document).ready(function(e) {
            $('img[usemap]').rwdImageMaps();
            
            $('area').on('click', function() {
                alert($(this).attr('alt') + ' clicked');
            });
        });
    </script>