Highlight a section of an image in JavaScript

Question

Hi Guys,

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?

Thanks,

Answer 1

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/"&gt;&lt;/a&gt;
</div>

Note that this will only work for rectangular links.

Answer 2

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

Answer 3

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

Answer 4

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.