Image Mapping: Add multiple hyperlinks in an image

Ever wondered how a particular image contained multiple hyperlinks?

Image Mapping in web programming terminology refers to adding not one, but multiple images in a hyperlink. There are many images on the web on which if you click, they direct you to some particular URL. But there are some images which have multiple hyperlinks and clicking a particular part of that image directs you to a particular location.

Today, I’m talking about the latter type of images.

Consider the following image.

Note that, the ability to click inside the image is restricted to the words – iPod, iPhone and iPad only. The rest of the area has no hyperlinks. Clicking any of the links will direct you to the respective product’s official website.

So, how did I do that? Well, it’s simple. All you need to know is some basic HTML.

In basic HTML, you use <img> tag to insert an image. And then this tag contains various attributes like src for source, border for borders et al. If you want map an image, you have to add one more attribute named usemap=”value”.

Here the “value” equals the name of the map. Confused?

Continue reading.

Just after you are done with the <img>, do not close the image tag. Follow it with the <map> tag.

Basically, a map tag needs only one attribute i.e. name. So if you are naming your map as “Apple” in this case, the value of the usemap attribute as mentioned above has to be “Apple”.

To define each hyperlink, you have to use another tag called Area. An area tag has the following important attributes: shape, coords, href.

Shape can be a circle, a rectangle or a polygon depending on the shape of the area you want for the hyperlink.
href is the link (url), of course.
coords are a lil bit confusing. Using MS Paint to figure out the co-ordinates should help.

Open the image concerned in Paint. Remember, the size of the image in MS Paint has got to be equal to the size of image you are using at your webpage.

Now, if your shape is a Rectangle, you need four co-ordinates. Two for the top-left corner and two for the bottom right corner.

To figure out the co-ordinates: Take your mouse pointer in MS Paint to that point concerned, and note down the numbers mentioned in the status bar (the bottom most bar of the window). Coordinates are always mentioned in the form of x,y and not x X y; here x and y are two arbitrary numbers.

A circle has three co-ordinates. Two for the center and one is the radius. A polygon has multiple co-ordinates depending on the shape. If it’s a triangle, it has six co-ordinates as triangle has 3 points (and 3 sides). Similarly, a pentagon has ten co-ordinates (five points and five sides).

The co-ordinates are the most important part of Image mapping. Following is the code that I wrote to map the above image on the right.

<img title="Apple" usemap="#map" src="https://awesometechblog.wordpress.com/wp-content/uploads/2010/11/apple_20cent.png"/>
<map name="map">
<area shape="rect" coords="47,48,94,66" href="http://apple.com/ipod" target="_new"/>
<area shape="rect" coords="130,47,203,63" href="http://apple.com/iphone" target="_new"/>
<area shape="rect" coords="248,49,293,66" href="http://apple.com/ipad" target="_new"/>
</map>
</img>

One thing to note, don’t type out the above code in the Visual mode of your web page editor. You need to type out the code in the HTML editor to render changes.

Fun part is, WordPress.com allows image mapping. See, I’ve done it right?