javascript - Selectable area of an image - Stack Overflow

admin管理员组

文章数量:1024603

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

Share Improve this question Follow edited Apr 18, 2013 at 10:18 vikingosegundo 52.3k1414 gold badges139139 silver badges183183 bronze badges asked Apr 15, 2013 at 8:30 PopeyePopeye 12.1k99 gold badges6464 silver badges9797 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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

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

Share Improve this question Follow edited Apr 18, 2013 at 10:18 vikingosegundo 52.3k1414 gold badges139139 silver badges183183 bronze badges asked Apr 15, 2013 at 8:30 PopeyePopeye 12.1k99 gold badges6464 silver badges9797 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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

本文标签： javascriptSelectable area of an imageStack Overflow