Highlight a section of an image in JavaScript

Question

I run a small webpage that allows users to click on various links using image maps. I'd like to highlight the section that a user clicks on to give some feedback to the user (they may be clicking on several different parts rapidly).

Is there a way I can invert (or otherwise highlight) a small section of an image JavaScript?

There is, but please be more specific about the size of the area and how you determine the area. It is just a square around where they click or are there particular areas only? Do you just want to draw a box where they image map was? — Jarrett Widman, Dec 13 '09 at 09:40

Daniel Vassallo · Accepted Answer · 2009-12-27T15:08:22.210

14

Instead of using image maps, you could try this CSS method:

Use a transparent <div> on top of each "image-map" part (link), and then use the CSS :hover pseudo-class to handle the highlighting.

CSS:

#image { 
    position: relative; 
    width: 400px;
    height: 100px; 
    background-image: url(image_map.png); 
}

#map-part { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: transparent;  
}   

#map-part:hover { 
    background-color: yellow;           /* Yellow Highlight On Hover */
    opacity: 0.2;
    filter: alpha(opacity=20);      
}

HTML:

<div id="image">
    <a id="map-part" href="http://www.example.com/"></a>
</div>

Note that this will only work for rectangular links.

edited Dec 27 '09 at 15:08

answered Dec 13 '09 at 09:40

Daniel Vassallo

337,827
72
505
443

1

+1 for the pure CSS option, even if it's not inverting the image. – Andy E Dec 13 '09 at 10:48
Thanks, made it work. For a-links i used "display:block", and margin-top & margin-left instead of top & left, so the coordinates are relative. – Dmitry Dzygin Sep 22 '11 at 09:58

score 8 · Answer 2 · answered Dec 13 '09 at 09:42

8

Take a look at jQuery MapHilight.
I'm not sure it does exactly what you need, but you can achieve that with minor tweaking.

answered Dec 13 '09 at 09:42

Kobi

135,331
41
252
292

1

Refer this example for using MapHilight: http://stackoverflow.com/a/17614118/2313371 – Gk_999 Aug 14 '14 at 12:29

score 0 · Answer 3 · answered Dec 13 '09 at 09:42

0

How about overlaying a semi-transparent <DIV> block over the clicked area to highlight it?

answered Dec 13 '09 at 09:42

Chris Fulstow

41,170
10
86
110

score 0 · Answer 4 · answered Dec 13 '09 at 09:44

There are many way,

In a d fashion way, break down your images into many smaller pieces and using table to combine them. After that, by using javascript to replace thr "src" attribute for the highlight effect.

In another CSS way, use CSS to clip the alt. image on top of the original, and control which area should be visible.

It is better to have a single image for all rather then many small images to speed up and user will get it without delay by network.

Highlight a section of an image in JavaScript

4 Answers4