Html image map: create multi-links in one image

Html image map will help you create multi-links on an image.

What is html image map?
Html image map is a way that allow you to define certain area to be linked within a single image on a web page. This means that, rather than having to link the whole image as one link, you can have lots of different links within that one image.


Here is a sample for the map tag:
<map name="map-name">
    <area shape="area shape"
    coords="area coordinates"
    href="area hyperlink" or nohref="nohref"
    target="hyperlink target"
    title="area title"
    alt="alternate text"/>
</map>
<img src="image-url" usemap="#map-name" />

For shape attribute (in area tag), it can be rect | circle | poly | default.


For coords attribute, below is a simple overview diagram for the coordinates.

How to calculate the coordinates?
Using Photoshop, first load the image into Photoshop, press F8 for the Info Panel to appear, move your cursor to centre of the circular logo and note down the coordinates.






We will also need to find the radius of the circle. By finding out the difference between the edge of the circle's coordinates and centre coordinates of the circle, or by using the rule tools in Photoshop. Either way will help you find out the radius of the circle.

Now let's find the coordinates for a rectangular logo. You just have to find out the top left and bottom right coordinates of the rectangular logo. Using the same method above you will be able to find the coordinates easily.

Once you have find out all the coordinates for each logo, now everything is easy. Just follow the attributes for the Map Tag listed above and enter all the coordinates for each of the shapes you have found.

<map name="logos">

    <area shape="circle" coords="68,56,33" href="http://www.stumbleupon.com/" title="StumbleUpon" alt="StumbleUpon" />

    <area shape="rect" coords="220,19,306,54" href="http://www.youtube.com/" title="Youtube" alt="Youtube" />

    <area shape="rect" coords="367,32,516,84" href="http://www.google.com/" title="Google" alt="Google" />

    <area shape="rect" coords="556,12,639,115" href="http://www.wikipedia.com/" title="Wikipedia" alt="Wikipedia" />

    <area shape="rect" coords="128,62,244,114" href="http://www.skype.com/" title="Skype" alt="Skype" />

    <area shape="rect" coords="301,103,444,136" href="http://www.yahoo.com/" title="Yahoo" alt="Yahoo" />

    <area shape="rect" coords="25,158,135,207" href="http://www.ebay.com/" title="eBay" alt="eBay" />

    <area shape="rect" coords="180,147,271,175" href="http://www.flickr.com/" title="Flickr" alt="Flickr" />

    <area shape="rect" coords="299,166,379,208" href="http://www.digg.com/" title="Digg" alt="Digg" />

    <area shape="circle" coords="500,184,32" href="http://wordpress.org/" title="Wordpress.org" alt="Wordpress.org" />

    <area shape="rect" coords="599,142,667,209" href="http://www.blogger.com/" title="Blogger" alt="Blogger" />

    <area shape="default" nohref="nohref" title="Default" alt="Default"/>

</map>

For custom shape link, you can try poly shape attribute. Just defining those important coordinates and it will form up a more precise Hot Spot area for the link.

Web tool to generate image map links:
If these above steps are too complex to you, you can use this online tool to generate html code for links on an image. It will let you select areas on the image, put link and give you html code. Here is the website:
www.image-maps.com