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

Blue Car

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?

Atif · Accepted Answer · 2013-04-15T08:47:17.297

3

You can use image maps for this

HTML

<img src="https://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/

edited Apr 15 '13 at 08:47

answered Apr 15 '13 at 08:36

Atif

10,623
20
63
96

I'd read something about imagemaps were from the 90s and weren't the way to go anymore so I didn't look into it that much – Popeye Apr 15 '13 at 08:38
They are in the HTML5 specification, so they will not get deprecated, http://stackoverflow.com/questions/5249502/are-html-image-maps-still-used#answer-5249654 – Atif Apr 15 '13 at 08:49
That's fine I am happy with that. – Popeye Apr 15 '13 at 08:51
That is fantastic and love the link. +1. – Popeye Apr 15 '13 at 08:55

Mike Johnson · Answer 2 · 2013-04-15T18:05:47.963

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

score 0 · Answer 3 · edited May 23 '17 at 12:30

0

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

edited May 23 '17 at 12:30

Community

1
1

answered Apr 15 '13 at 08:44

Vikram Shityalkar

228
3
13

score 0 · Answer 4 · answered Apr 15 '13 at 09:04

0

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

answered Apr 15 '13 at 09:04

abiansh

79
2
2
9

score -1 · Answer 5 · answered Apr 15 '13 at 08:39

-1

you can draw images over canvas object (html5), all those sections can be vector drawn

answered Apr 15 '13 at 08:39

duckduckgo

1,280
1
18
32

Selectable area of an image

5 Answers5

HTML

JS