Learning Resources

Applying Image Maps

An image map is one image with multiple "clickable" areas and it includes

Image

First of all, you need a suitable graphic. You need to be a bit careful when choosing the right image. An image that cannot be divided in different sections is not your best choice, but an image that has clear cut-offs or lines would be better. Of course, this down not apply to navigational menus or similar, just to everyday pictures like animals, objects or people.

Co-ordinates

When you've chosen or created your desired image, you then insert it into an image editor (I use Ms Paint) so that you can find its co-ordinates. Try to either write down different co-ordinates of take them one by one and then insert them into your document. You'll need different co-ordinates depending on what sort of "hot spot" you'd like to use. Hot spots are covered in the next paragraph.

Hot Spot

Now that you've got your image and co-ordinates, HTML comes to finalise your job. There are three different shapes (commonly termed "hot spots") that can be used in image maps. They are as follows:

-RECT
-CIRCLE
-POLYGON

Rect

Rect is obviously short for rectangle. For this one, you'll need two different co-ordinates. Top right and bottom left.

Circle

Many people get confused with this one and many don't even know that it exists. I personally think it's the easiest of all. All you need is the centre co-ordinate (the point in the centre of your shape) and it's radius size (remember your maths: radius is HALF the diameter. Don't get diameter and radius mixed up!).

Polygon

The most common hot spot used. This is used for when you can't use neither of the above hot spots. This one uses the co-ordinates of the points in order. So if you're going to have a pentagon (shape with five sides), then you list all five co-ordinates but make sure they're listed in ORDER. One after the other, otherwise you'll confuse some browsers.

Map Name

Just like any person, document, image and country, image maps also require names. This is simply because if you are going to include more than one map on your page, then to identify which image goes with which map, you'll need to name the map. Confused? Look here:

</map>

</map>

[.... codes for map which I'll show you later on ....]

[......]

Now, if you didn't name each map, how would the browser know which image goes with which map?

You'll also notice this tag at the end of each map: . You may have suspected by now that just closes the map. Simple!

Area & Anchor Tags

There are two more tags you should know before completing your image map. is a tag that identifies which hot spot is being used. The other is the anchor tag which I'm sure you already know what it means. It's just . So in a completed code, they should both look like this:

Final Code

Now you just need to put all these codes together and you've got magic! Here's what your final code should look like:

</map>

Other Tips

Of course, you don't just have to use external links. You can also use anchors for bookmarks on the page [href="#SectionTwo"], mailto [href="mailto:[email protected]] and other anchor tags. You can specify the target as well (put it right after the anchor tag) [target="_new"]. Insert alternative text tags- alt (insert it after anchor as well) [alt="Click here to learn about trees"].

Certified HTML5 Developer Learning Resources Applying Image Maps

Learning Resources

Applying Image Maps