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?

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?

• javascript
• jquery
• html
• css

5 Answers 5

You can use image maps for this

HTML

<img src="https://i.sstatic/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/fxZsd/

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./tags/tag_map.asp

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 draw images over canvas object (html5), all those sections can be vector drawn