HTML Image Map has been around all this while, and yet not many web pages are using it when it comes to single image with multiple links. It’s really handy and fast for web designers or developers to create multiple “Hot Spots” linking within a single image, without slicing any image for linking.
For instance, your client has given you a list of sponsors and he wants each of the logo to be linked to the sponsor’s web page on his website. You may want to try out Image Map, it will make your job much easier.
[tut demo=”https://onextrapixel.com/examples/image-map/” download=”https://onextrapixel.com/examples/image-map/image-map.zip”]
What Is Image Map?
Basically, 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.
Still not sure what is Image Map? Check out the demo.
Before we start here are the general attributes 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>
Most of the attributes are used quite often, let’s talk about the shape and the coords attributes. For shape attribute it have rect | circle | poly | default.
For coords attribute, below is a simple overview diagram for the coordinates.
In this tutorial, you will see how you can link several logos to their web pages within a single image. First is to have your image ready, here I mashed up some of the popular web logos into one image.
First create your normal image HTML markup, notice usemap="#logos" attribute, this is to associate the image map with the image.
<body>
<img src="images/weblogo.jpg" alt="Web Logos" usemap="#logos" />
</body>
Next you will need to find out the coordinates for each of the logo using Photoshop. Let start with a circular logo, 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.
[tut demo=”https://onextrapixel.com/examples/image-map/” download=”https://onextrapixel.com/examples/image-map/image-map.zip”]
Conclusion
Do give this Image Map a try when you need to create multiple links on a single image.
