How can apply 4 different tooltip onto a single image

Can someone help me that how can apply 4 different type of tooltips onto a single image? When someone mouse over on image at top bottom left and right, at that time 4 different tooltip should be displayed.

Here, I have put example what I need. It's in Flash but I want without Flash. http://w开发者_StackOverflow中文版ww.lavasa.com/high/

If you have any idea regarding same please share with me.

I think you have three options.

1. Doing some work and displaying a tooltip 'manually', i.e. a floating div using javascript or something, there are probably a bunch of libraries for doing this.
2. Split your image into four, and provide a title (which will be displayed as a tooltiop of mouse is hovering) for each.
3. Do it old school with a <map>.

An example using <map>:

<img src="trees.gif" usemap="#green" border="0">
<map name="green">
  <area title="Save" shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
  <area title="Furniture" shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
  <area title="Plantations" shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>

(Blatantly stolen from http://www.javascriptkit.com/howto/imagemap.shtml which was the first google hit, only added the 'title'-tag)

You could add 4 transparent images over your image and apply hover methods in them.

I think your looking for an imagemap with tooltips. Here is a quick example I can find, the demo you want to see is at the bottom of the page.

http://jquery.bassistance.de/tooltip/demo/

Well image map also struct me. But these is another simpler method without having to write custom javascript. Just cut the image into 4 different parts and apply tooltip to each or simple <img alt="txt for north-west"/> will show some image tooltip.