Develop Reference

Mouse hover on image parts show hints

I have an html page with simple, static image like this : Image
I need a way that putting mouse (hover) on any object, for example - "BED" to get a tooltip that - "There is bed".
I know how hover works at pure html, with blocks or any teg, but I need a way of doing/tracking the user cursor, and when it enters in specific zone, to show the hint. Probably some JS required. How can I setup this unknown geometric forms with their coordinates to achieve my goal?

No JS script needed :)
You can use image maps .. they are old but should work as you expected.. you can run it and see title when you hover over kitchen and bad
I used this webpage to 'generate' rectangles and area over the image or hotsports..
<img src="https://www.edrawsoft.com/symbols/simple-home-floorplan.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="This is bad" title="This is bad" href="" coords="520,132,451,48" shape="rect">
<area target="" alt="This is kitchen" title="This is kitchen" href="" coords="343,204,254,55" shape="rect">
</map>

In addition of the prev answer you can also add this jQuery to your page. It makes the tooltip show more prominent and also quicker:
$( function() {
$( document ).tooltip();
} );
This native jQuery function uses the 'title' attribute! Don't forget to add these like this:
<img title='This is a test!!' src='test.png'>

make hover effect on different parts of an image, not html but an img

Basically i have a "blueprint" for a building project,i need to make it so that when they hover on specific parts of the floor a short description pops out.
something like this:

You can use an Area Map. The syntax is as follows:
<map name="myMap">
<area shape="rect" coords="0,0,10,20" href="somelink.html">
<area shape="circle" coords="10,30,50,100" href="anotherlink.html">
</map>
You use the coords to define each area. You then can assign an ID to each area and make the hover items. Try it and let us know.
You can use an Image Map Generator online, there are plenty. I use this one: http://imagemap-generator.dariodomi.de/ It is much easier than doing it by your own.

try this one
<img src="map.jpg" width="100%" height="300px" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="50,50,10,10" alt="building" title="building">
<area shape="rect" coords="150,150,10,10" alt="building + rooms" title="building + rooms">
</map>
set your coordinates in image which will you generate popup message

This can also be done as assign this image as background to a div of the same size. Then position anchor links at the exact positions where you want the hover effect. Add an hover tool-tip as given here and that's it. Everything can be done with pure css.

responsive image mapping with coordinates

I am trying to understand how this plugin works :http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
The goal is to have responsive image maping but what I dont understand is how to come up with the coords. See below how there are a bunch of numbers, how do I calculate my own coords for my image, can some one explain what is going on with this demo and how it is to be used?
<map name="powerpuffgirls">
<area shape="poly" coords="122,36,281,36,285,37,287,39,289,42,289,47,289,48,278,77,276,81,274,84,271,85,218,85,218,90,210,90,208,95,207,99,204,100,72,100,26,87,23,84,20,81,19,76,35,40,37,38,43,35,62,35,65,30,68,26,72,25,115,25,119,27,121,30,122,36,122,36" href="#ppg" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
<area shape="poly" coords="864,668,912,650,922,668,971,667,973,718,981,722,985,729,988,731,1010,731,1010,742,833,742,833,730,865,730,865,721,874,721,874,718,864,668,864,668" href="#cn" title="Cartoon Network" alt="Cartoon Network" />
<area shape="poly" coords="1010,298,995,281,979,267,962,256,944,248,927,242,909,238,876,236,857,237,838,240,817,246,797,255,778,266,761,281,746,299,735,322,730,335,728,346,726,348,721,349,709,344,711,361,718,378,708,380,697,388,688,398,685,404,685,411,686,419,691,425,698,429,707,431,735,426,743,427,752,433,762,444,774,454,798,469,787,483,779,481,772,482,761,486,753,495,747,505,746,516,746,521,748,527,751,532,759,538,741,561,734,572,732,584,733,591,737,599,744,604,754,607,765,604,776,597,797,570,817,543,857,488,865,488,893,488,910,485,924,483,930,483,935,485,939,490,934,496,931,501,929,506,932,514,938,519,945,522,954,523,966,521,979,516,985,512,989,507,993,500,994,493,991,484,986,476,967,464,982,454,998,440,1013,425,1024,409,1024,329,1017,312,1010,298,1010,298" href="#buttercup" title="Buttercup" alt="Buttercup" />
<area shape="poly" coords="571,101,563,83,562,66,549,80,541,96,537,112,536,128,537,141,531,141,508,141,508,141,511,133,517,126,533,114,500,111,476,111,452,114,438,118,424,124,410,131,400,140,392,152,390,167,391,174,394,183,400,191,409,198,391,215,379,234,371,252,368,271,367,277,368,298,371,316,381,338,396,358,414,375,399,378,387,385,379,393,377,405,378,412,382,418,388,424,395,429,411,434,425,435,431,446,439,456,459,474,480,488,502,500,514,507,523,515,528,523,530,534,529,541,526,547,515,562,532,556,548,547,562,536,574,523,583,508,590,490,594,470,596,448,596,430,591,410,587,398,599,390,613,382,628,371,643,356,657,337,666,313,669,299,670,284,669,276,668,264,670,263,697,263,704,261,711,257,716,251,719,243,718,236,715,231,706,221,694,215,683,213,677,213,670,215,664,220,656,232,645,215,652,206,657,199,660,191,662,181,660,169,655,158,648,150,638,142,617,130,596,120,582,112,571,101,571,101" href="#blossom" title="Blossom" alt="Blossom" />
<area shape="poly" coords="254,286,232,271,207,260,179,254,150,252,119,254,103,257,88,263,71,270,61,275,58,274,57,273,45,269,36,268,17,271,7,276,1,283,0,283,0,285,0,290,0,352,2,354,1,355,1,390,3,401,5,410,9,420,22,441,39,460,58,476,47,480,38,487,32,494,30,504,33,515,41,524,53,531,69,534,77,533,85,530,90,525,93,518,91,512,88,508,85,505,85,502,86,499,89,497,97,496,120,500,138,503,154,503,167,503,185,531,215,576,235,609,241,617,248,622,255,626,265,628,273,626,280,621,285,614,287,605,283,592,276,580,261,558,269,553,273,547,276,541,277,536,274,524,267,513,257,504,250,501,244,501,240,502,237,503,225,488,242,478,259,468,276,451,282,447,292,446,318,450,327,448,334,445,339,439,341,431,337,419,329,409,318,401,307,398,301,398,301,393,301,391,303,391,321,393,336,391,352,387,370,380,387,370,373,368,364,364,358,360,353,354,350,347,347,330,345,313,343,302,340,293,336,286,331,280,318,272,305,267,293,266,282,267,272,270,262,276,254,286,254,286" href="#bubbles" title="Bubbles" alt="Bubbles" />
</map>
</div>

The plugin does the heavy lifting for you.
From what I can see, the coords are whatever you want... the plug in then calculates the new coords based on the size of the image. These obtuse coordinates are for a complete outline of the powerpfuff girls and the logos... try something simple like a circle or a rectangle.

If you are still looking for a way to create the coordinates, you can use various apps on your computer or you can also do this online such as image-maps.com. Just do a search online for "online image map editors" and several will show up.
Simply upload your image or add a URL of your image and then create the shapes (rectangle, polygon, circle) with corresponding links etc. and it will output the code for you.

Fill image map on click and set variable

I have an image map of a human body that I have separated out into 3 zones (for simplicity): body, right leg, and left leg.
I want to be able to click the section of the body, and have that section change colors (ex. fill gray) and set the value of a variable to true (1) for that section. All body sections are by default a value 0.
Variables that need to be set are
{Hidden:TORSO}
{Hidden:RLEG}
{Hidden:LLEG}
Here is my image map:
<img src="http://imgur.com/wzHgrvS.jpg" usemap="#Map" border="0" />
<map name="Map"map id="bodyMap" name="myMap" >
<area shape="poly" alt="" title="Torso" href="#" id="TORSO" coords="94,84,95,134,107,177,104,189,102,200,103,209,102,221,188,220,184,197,182,183,183,168,187,153,191,142,192,129,188,89,155,90,130,90,114,89" />
<area shape="poly" alt="" title="Right Leg" href="#"id="RLEG" coords="99,221,97,242,94,259,90,270,90,291,91,315,94,333,96,343,95,347,94,358,93,366,93,372,89,387,89,405,93,421,96,439,99,456,100,470,100,477,116,477,113,462,116,441,119,423,122,408,119,392,117,376,122,363,126,337,133,314,139,289,140,273,133,265,130,252,122,240,114,231" />
<area shape="poly" alt="" title="Left Leg" href="#" id="LLEG" coords="147,269,153,303,158,319,162,338,164,348,164,357,166,365,170,373,170,380,168,391,166,403,166,414,168,427,172,443,174,460,175,469,174,474,190,473,187,453,192,437,194,423,199,399,197,381,195,349,191,335,196,315,196,289,196,265,191,242,189,222,187,218,176,230,167,239,160,249,155,262,154,266,148,270" />
</map>
I have done this with and selecting a hotspot on an image i.e. circles on a part of a body, but never the whole limb. I'm stumped.

Probably the fastest/easiest way to do this is with the ImageMapster jQuery plugin.
ImageMapster (GitHub: jamietre / ImageMapster, License: MIT) by James Treworgy makes it easier to manipulate HTML image maps. Interesting effects can be created using image maps and more modern HTML/CSS/JavaScript techniques, while still falling over to the basic functionality in older browsers.
http://www.outsharked.com/imagemapster/
These demos show that it will do exactly what you desire:
http://www.outsharked.com/imagemapster/default.aspx?demos.html
By calling $('img').mapster(options), ImageMapster will attempt to bind to each image that has an associated map. An area within the image map can be selected with $('area').mapster('select'). The project has lots of options and features.
Here is code for a somewhat basic example:
http://jsfiddle.net/nYkAG/

What you'll need to do is use is create image maps for those areas that you want to click and have something happen. If you don't have Photoshop or Firework and are looking for a free service, try Image-Maps.com.

How to display information on rollover image like facebook people taging

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 =)

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...

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-/