如何在翻转图像上显示信息，例如facebook人物标签

Question

I wonder if anyone can post a code example on how I can display some information when I hover a certain pixel cordinate on an image (just like when I hover a picture on a facebook image and it displays a text of who that person is that I currently have my mouse pointer over).

The diffrence between facebook and my solution is that my picture is not a picture which contains people, but multiple graphs on same picture, so alot of image pixelcordinates is going to display some data when I hover over them.

I also want my sollution to be webbased, and if possible only contain javascript, jquery css html.

Thanks so much in advance =)

Answer 1

ike @jimy says, use an image map. – Alex Thomas 6 mins ago

But to answer your question "...wonder if anyone can post a code example..." i've done this:

HTML

<img name="n00000001" src="http://ajthomas.co.uk/shapes.png" width="300" height="300" border="0" id="n00000001" usemap="#m_00000001" alt="" /><map name="m_00000001" id="m_00000001">

<area shape="rect" coords="28,179,116,256" href="#" title="square" alt="square" />

<area shape="circle" coords="228,66, 45" href="#" title="round" alt="round" />

<area shape="poly" coords="60,32,22,72,51,120,104,109,111,54,60,32" href="#" title="Poly" alt="Poly" />

I've put it on jsfiddle for you too - http://jsfiddle.net/ajthomascouk/xsrzz/

I used fireworks, but i'm sure there is free tools out there too.

Hope this helps.

Update

i'm sure there is free tools out there too.

Yup, Gimp can do it using this plugin

Good luck...

Answer 2

Here are a few links for the same.They make use of a css technique known as "image maps"

http://www.frankmanno.com/ideas/css-imagemap/

http://frankmanno.com/ideas/css-imagemap-redux/

http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/