Develop Reference

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.

How to add background image to <area> tags for pins on a map

Ok so I have been tasked to create a map with pin points and roll overs but the direction I was given was to use hot spots. I told my lead developer there were better things out there we could use but to no avail. I am stuck using a very light plugin called rwdImageMaps this converts my cords to a responsive image. I need to create pinpoints in the spots I marked off but I am not sure how to do this on the attribute. Any help would be very grateful since the demo my dev sent me uses a map image with the pins on it and then to add his roll over effect he loads an entire new map which only changes the color of the text. I need it to roll over and grow revealing the locations description of some kind example code and images below. Thanks for everyone's input.
Ill explain the pins - They have a pin like icon along with a label name of the city/ country then when you roll over them it extends revealing more information of that location. Can I even achieve this with how I have this currently? I do not mind changing this code to be something better that can achieve this outcome.
<script src='js/jquery.rwdImageMaps.min.js'></script>
<script>
$('img[usemap]').rwdImageMaps();
$('area').on('click', function() {
alert($(this).attr('alt') + ' clicked');
});
</script>
<img src="images/worldMap.jpg" width="1170" height="820" usemap="#worldMap" class="worldMap" alt="" />
<map name="worldMap" class="hidden-xs">
<area shape="circle" coords="200,320,15" class="marker hidden-xs" href="#chicago" title="Chicago" alt="Chicago" />
<area shape="circle" coords="350,580,15" class="marker hidden-xs" href="#saopaulo" title="Sao Paulo" alt="Sao Paulo" />
<area shape="circle" coords="540,310,15" class="marker hidden-xs" href="#amsterdam" title="Amsterdam" alt="Amsterdam" />
<area shape="circle" coords="810,455,15" class="marker hidden-xs" href="#Mumbai" title="Mumbai" alt="Mumbai" />
<area shape="circle" coords="940,405,15" class="marker hidden-xs" href="#Shanghai" title="Shanghai" alt="Shanghai" />
</map>

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.

Selectable area of an image

I am not sure exactly what I should be looking for on this so if I am asking a duplicated question please advice straight away and I will remove.
Say I have this image
I want to make sections of it selectable, so when I select say the roof it will at the moment have an alert or console.log saying ROOF same for if I selected right side, left side, rear, etc
And I want it to change to grey the area that I have selected so we know I have selected that area.
I know this can be done with javascript/jquery but I am unsure how.
Has anyone got any suggestions?

You can use image maps for this
HTML
<img src="http://i.stack.imgur.com/7o2sJ.jpg?1366014978754" alt="" usemap="#map1">
<map id="map1" name="map1">
<area shape="rect" alt="" title="" coords="69,25,243,128" href="#" target="" />
<area shape="rect" alt="" title="" coords="81,255,248,426" href="#" target="" />
</map>
JS
$('#map1 area:eq(0)').click(function () {
alert('hood');
});
$('#map1 area:eq(1)').click(function () {
alert('roof');
});
Fiddle - http://jsfiddle.net/fxZsd/

Yes, it is possible. But not sure if you will like the approach. Design your Car or any image in SVG format. SVG supports mouse events. Bind events to those areas and on click change the color.
Here is question about changing color using javascript Changing SVG image color with javascript

use html map tag and give a id to the map and write jquery code for click event for the map and do your task

You can do so with html map tags to declare the sections using a coordinate system, and javascript/jquery to create the alerts/popups/tooltips, etc.
example from w3schools:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
for more info on it, check out http://www.w3schools.com/tags/tag_map.asp

you can draw images over canvas object (html5), all those sections can be vector drawn

alert message shows when the user clicks the image without clickable area

I am using a simple image map as per the w3 tutorial,
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="hj.png" alt="skitch" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,110,210,150" alt="Sun" href="sun.htm">
</map>
I need to alert the user, if he clicks the image's non click able area. I have searched a lot for this and found lot of tutorial, but couldn't find the exact. Is there any way to do it in java script, though I am newbie to jquery. If there is only jquery solution, please give me some tutorials with examples.
Any help appreciated!

Create new clickable areas in the image map that cover the areas the person shouldn't click then set it like this:
<area shape="rect" coords="0,110,210,150" alt="Not Here" href="#" onclick="alert('Don\'t click here')">