0

I have an interesting project at the moment. This includes building an interaction diagram for users to explore a new industrial machine. The idea is that the user will see a the 2d image of the machine and be able to click on certain areas. When they click these, it will load another image of that individual part, which can then be clickable again to go into more detail.

The company I'm doing the project for has CAD software for 3D modeling which can be rotated etc... So the idea that I have come up with is for them to take screen shots of every single part on their CAD Software.

So lets say I have the base image, for this example I will use a car model seen below.

enter image description here

Now when the users mouse hovers over the engine, I want the engines colour to change to orange, then when clicked to load in the engine image.

So now I've explained what I'm trying to do I'll move onto my problem. I have used an online map generater www.image-maps.com, which looks okay. So I have drawn around the engine to create the hotspot. This is the html output I get.

<img id="Image-Maps-Com-image-maps-2015-11-26-071629" src="http://www.image-maps.com/m/private/0/9ob5qc47m8e6irp0caqh20qik2_car.gif" border="0" width="475" height="311" orgWidth="475" orgHeight="311" usemap="#image-maps-2015-11-26-071629" alt="" />

<map name="image-maps-2015-11-26-071629" id="ImageMapsCom-image-maps-2015-11-26-071629">
<area shape="rect" coords="473,309,475,311" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_64839" />
<area id="engine" alt="" title="" href="http://www.image-maps.com/" shape="poly"coords="155,128,141,131,125,134,121,134,110,132,102,132,106,141,104,153,103,162,100,169,97,171,89,173,99,181,104,191,106,198,125,199,142,201,150,198,156,193,165,187,168,181,177,191,184,187,178,172,180,165,181,159,175,152,173,145,168,138,168,132,164,128" style="outline:none;" target="_self" />
</map>

Here is the jsfiddle so you can visualize it more jsfiddle

With the code I can see that when my cursor goes over the map area of the engine the cursor changes to pointer. But when I try to change the background colour of the map area nothing happens.

#engine:hover{
    background-color:red;
}

$('#engine').hover(function() { $(this).css('background-color','red') } );

Neither of the above methods work. If I change the <area> tag to a <div> then I cannot see the hotspot.

Does anyone know what I can do to get around this?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Matthew Smart
  • 341
  • 3
  • 16
  • AFAIK, `area` elements are not affected by CSS...You'd probably be better off using an SVG. Possible duplicate - http://stackoverflow.com/questions/5026421/apply-css-to-area-map – Paulie_D Nov 26 '15 at 12:50
  • As I have seen you generated image map http://www.image-maps.com/ , while generating image map you can select mouse over image in events section. – Allen Nov 26 '15 at 13:03

1 Answers1

2

The problem is that the image map is not creating a DOM element at the hotspot.

One workaround is to load a new image (with the engine highlighted) and load this every time a user hovers over the engine. You can repeat this with other mapped hotspots as well (each with a new image), but if you have many hotspots it is not a good solution, as you will need to load many different images. See here for another answer to the same question.

Community
  • 1
  • 1
Joey M-H
  • 763
  • 1
  • 6
  • 15