HTML - How to use title attributes as a tooltips for different portions of an image

Question

Hello all,

I have an image with different objects inside. Is there a way that I can associate different title attributes to different objects inside this image?

Thank you

//// I have found a solution for this question ////

Here is what we can do:
1> Add a DIV with an image as its background
2> Add a sub DIV inside this image DIV
3> Position this sub DIV
4> Change the title properties of this sub DIV.

Answer 1

You can use map tag with a title attribute on area element:

<img src="planets.gif" width="145" height="126" usemap="#planetmap" />
<map name="planetmap">
  <area shape="rect"   coords="0,0,82,126" title="Sun"     href="sun.htm"    />
  <area shape="circle" coords="90,58,3"    title="Mercury" href="mercur.htm" />
  <area shape="circle" coords="124,58,8"   title="Venus"   href="venus.htm"  />
</map>

For some reason, alt attribute doesn't works on Chrome as a tooltip.