CODEWITHSUNDEEP
javascriptjqueryhtml
Rakesh Prajapati
Rakesh Prajapati

Reputation: 61

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://www.lavasa.com/high/

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

Upvotes: 0

Views: 3100

Answers (4)

samarjit samanta
samarjit samanta

Reputation: 1315

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.

Upvotes: 0

Zachary
Zachary

Reputation: 6532

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/

Upvotes: 0

falstro
falstro

Reputation: 35677

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)

Upvotes: 2

kgiannakakis
kgiannakakis

Reputation: 104188

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

Upvotes: 0

Related Questions