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.

On MouseOver change of images sometimes "flashes"

I use an imagemap with the following code:
<img name="team" src="team.jpg" width="2560" height="1600" border="0" usemap="#team" alt="" />
<map name="team">
<area shape="rect" coords="495,308,887,794" alt="" onMouseOver="document.team.src='team_a.jpg'" onMouseOut="document.team.src='team.jpg'" >
<area shape="rect" coords="1022,513,1342,897" alt="" onMouseOver="document.team.src='team_b.jpg'" onMouseOut="document.team.src='team.jpg'" >
<area shape="rect" coords="1510,480,1679,691" alt="" onMouseOver="document.team.src='team_c.jpg'" onMouseOut="document.team.src='team.jpg'" >
</map>
This works fine, but often the change of images "flashes".
Is there anything that can be added to the code? Should I preload the images? Are perhaps the images to big?

The solution is to preload the images. If you are using jQuery you can count on Lazyload.
Anyways, there are a lot of alternatives and not only with Javascript. In this article is pretty well explained.

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

Determine which Area in a Map (imageMap) was clicked using JavaScript (or jQuery)

I'm writing a mock up (using HTML, JS/jQuery) and CSS for a client which involves having a single image (of an interface) with an Map applied to it. For reasons I won't explain when a certain area is clicked an action is performed which includes an animation, then changing the image src (so it looks like it is moving between interfaces) and then I apply a different imagemap to the image (perhaps I should say <img> tag)
The client asked for this, I know it seems like madness but I don't have any mockup tools to perform the animations, etc, etc...
I've noticed a pattern and I could refactor my code so it is easier to extend and maintain. However I was wondering, say I have the following HTML:
<img src="claas_ipad3.jpg" USEMAP="#claas_ipad3" width="1130" height="871" alt="" border="0" id="mainPage">
<map name="claas_ipad3">
<area shape="rect" coords="181,249,255,341" href="" alt="" id="Contacts">
<area shape="rect" coords="345,251,454,341" href="" alt="" id="Appointments">
<area shape="rect" coords="533,256,576,311" href="" alt="" id="Maps">
<area shape="rect" coords="686,255,785,344" href="" alt="" id="Tasks">
<area shape="rect" coords="835,246,973,348" href="" alt="" id="Products">
<area shape="rect" coords="176,412,278,513" href="" alt="" id="Reports">
<area shape="rect" coords="330,411,457,513" href="" alt="" id="PriceTable">
<area shape="rect" coords="502,399,637,518" href="" alt="" id="SalesCycle">
<area shape="rect" coords="677,398,808,519" href="" alt="" id="MetaData">
<area shape="rect" coords="844,408,970,510" href="" alt="" id="Settings">
<area shape="rect" coords="173,545,283,662" href="" alt="" id="Vids">
<area shape="rect" coords="328,558,461,652" href="" alt="" id="Web">
<area shape="rect" coords="491,559,626,666" href="" alt="" id="Files">
</map>
Is it possible for me to determine using JavaScript or jQuery if an area was clicked? Then I could identify the ID and perform the correct actions. What I currently have is a lot of different conditions like so...
$("#Contacts").click(function(event){
event.preventDefault();
// okay lets show the contacts interface
$("#mainPage").fadeOut(300, function(){
$(this).attr('src','claas_ipad3_1.jpg').bind('onreadystatechange load', function(){
if (this.complete){
$(this).fadeIn(300);
$(this).attr('USEMAP','#claas_ipad_1');
}
});
});
});
However if I know which area was clicked (by determining the id) I can apply array values into a generic function rather than binding to the map areas specifically.
I was thinking I could determine the id of what was clicked something like this:
$(this).live('click', function () {
alert($(this).attr('id'));
});
however this will affect my whole page, which isn't a problem but I know it won't work.
Sorry if I haven't explained myself well or my wording is poor. I can extend or reword if desired.
Thanks
UPDATE
I have solved this, if I apply an ID to the Map using the following will return the ID
$("#Map1 area").click( function () {
alert($(this).attr('id')); // this
});

There are different approaches.
I guess the easiest would be this one:
$("map[name=claas_ipad3] area").live('click', function () {
alert($(this).attr('id'));
});
Note that as of jQuery 1.7, the .live() method is deprecated and you should use .on() to attach event handlers:
$("map[name=claas_ipad3] area").on('click', function () {
alert($(this).attr('id'));
});

using jquery i want place an image over another based on the coordinates

I'm trying to place an image over another based on the coordinates.
My html is:
<button id="add">add image</button>
<div id="container">
<img src="http://www.rangde.org/newsletter/nov11/images/real_tree.png" width="400" usemap="#treemap" />
</div>
<map name="treemap">
<area shape="circle" coords="345,483,13" alt="Venus" href="#" />
<area shape="circle" coords="333,361,13" alt="Venus" href="#" />
<area shape="circle" coords="302,284,13" alt="Venus" href="#" />
<area shape="circle" coords="79,350,13" alt="Venus" href="#" />
<area shape="circle" coords="55,489,13" alt="Venus" href="#" />
</map>
My script is:
$('document').ready(function(){
$('#add').click(function() {
$('area[alt=Venus]').css('background','http://www.rangde.org/newsletter/nov11/images/green-ball.png');
});
});
Here is my jsfiddle

This isn't an appropriate use of an image map, unfortunately, because they're not actually an element that can be styled.
However, if you switched this over to use some absolutely positioned divs in the same location as your mapped circles, combined with the CSS border-radius property, you can create the effect you're looking for: http://jsfiddle.net/N6Sbt/1/
That should be a pretty straightforward solution to your problem.

I'm afraid, it is not possible to set background on <area> as it is not a graphical element. If it was possible some would use it earlier to create simple <canvas> :)
Here is a forum, where people speak about similar

I'll use <a> instead of map, which should help you achieve the same thing. Just set them as 'position:absolute' with 'top' and 'left' having the value of coordinates, and 'width', 'height' with the value of size (as it's only 13 pixels, I don't thing rectangle and circle will be that different). Assign them with a class name so you can select them with jQuery. And don't forget to set the 'container' as 'position:relative'.

Try out this plugin it might help.still in development but you can have a look at it.
http://archive.plugins.jquery.com/project/maphilight
Here is the demo link
http://davidlynch.org/projects/maphilight/docs/demo_world.html