Image-Maps: Multiple clickable areas

Table of Contents

HTML Image-Map

An image map is one image with multiple "clickable" areas.

For example: Hover your mouse over the below image:
(Note, that each shape is linked to a different URL)

HTML for the same is:


<img src="map.png" usemap="#demomap">

<map name="demomap">
  <area shape="rect"   coords="6,36,100,130" alt="Rectangle" href="javascript:sayRect()">
  <area shape="circle" coords="157,34,32"    alt="Circle"    href="2.html">
  <area shape="poly"   coords="156,94,  191,111, 193,137, 160, 152, 122,152, 126, 110" alt="Polygon" href="3.html">
</map>

This comes really handy when there is a complex image and its different areas need to be tagged.

An example could be a group-photograph uploaded to a social networking site which provides the ability to tag different people in the photograph such that viewers can click anybody's image in the group photograph to go to their profile.

Like us on Facebook to remain in touch
with the latest in technology and tutorials!

Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email:	(Your email is not shared with anybody)

Comment:

Facebook comments:

Site Owner: Sachin Goyal