Posted by: prajapatinilesh | April 20, 2009

Image area map html elements

The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
The name attribute is required in the map element. This attribute is associated with the <img>’s usemap attribute and creates a relationship between the image and the map.
The map element contains a number of area elements, that defines the clickable areas in the image map.
Example:
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap” />
<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”sun.htm” />
<area shape=”circle” coords=”90,58,3″ alt=”Mercury” href=”mercur.htm” />
<area shape=”circle” coords=”124,58,8″ alt=”Venus” href=”venus.htm” />
</map>
</body>
</html>
This is a beautiful feature to map the image on particular coordinates. so, we can use this kind of map during jpgraph generation or any use and we can put javascript tooltip to display imformation on particular point of image.

Thanks,
Nilesh

Advertisements

Responses

  1. Hi, interesting post. I have been wondering about this topic,so thanks for posting. I’ll probably be subscribing to your site. Keep up the good work

  2. Hey ok.. i also came to know when work assigned to me from my company. 🙂 anyways that map html elements is good and generally people are not knowing its uses…. so, adding here in my article so, people can start its used if they needed…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: