Introduction

Have you ever found it difficult to make an interactive image, worrying about positioning those images and then being cross browser friendly? Well there is an easier solution to creating a HTML Image Map and that’s by using the <map> element tag. In this tutorial, we will teach you how to create a semantic and clean Image Map with by using one image with multiple links. Here is an example of what we will be working with.

image-map-example

The <map> element

The <map> tag is a special element in HTML that is used specifically to define a client-side (that’s what you see) image-map. Along with the <map> element comes another element that is necessary to make this example work. The <area> tag. The area tags are important to specify the coordinates of the clickable area so the computer knows that when the user clicks that “area”, it should perform an action. Let’s create a diagram image like our example and use the <map> and <area> tags to create our image map.

This is all the code that we need to set up our image map. Let’s break this down so we can better understand what we are setting up and how to make adjustments if needed.

Containing the Image map
As you can see the image and <map> tag are all contained within a paragraph tag. This will allow us to overlap the two elements and contain them as one object to work with

Map and Area
In our image we have four areas on the map that we want to be clickable. We start off by simply giving our map a name placing four <area> tags with some standard global attributes like href, alt, and title. Whatever we name our <map> we must specify an attribute tag called usemap=”” within our image. This will allow us to link the image map together. We need more information though if we wish to place the clickable areas in the right place.

Area Coordinates
To delegate where the clickable regions are located, we will use the shape and coords (coordinates) attributes. The shape simply specifies the regions shape, whether it is a rectangle, circle, or polygon. In this case we will use the Circle Shape since we are dealing with circles. Now we must adjust the circle with the coords attribute. To do so, you must place the x, y , radius value of the circle. Simply put, the radius will be the size of the circle, the x will be the horizontal coordinate, and the y will be the vertical coordinate of the circle.

Putting It All Together

Label all of your attributes properly and start working on testing out the coordinates of your new image map. In order to see where exactly the <area> clickable areas are on the image, hover over the areas and right click. You will see a focus state pop up that will tell you how close your coordinates are and give you an idea on how far to move them.

Wrapping It Up

This is a great feature for web developers. This can be a used within a website or for presentations as well. By using the <map> tag feature, you can open up possibilities to better web presentation and offline presentation as well. Practice and develop this code further and see if you can create image replacement and animation to your image map.