Selectable area of an image

Question

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?

Answer 1

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/

Answer 2

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

Answer 3

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

Answer 4

使用 html 地图标签并为地图提供一个 id 并为地图的点击事件编写 jquery 代码并完成您的任务

Answer 5

您可以在画布对象（html5）上绘制图像，所有这些部分都可以矢量绘制