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?

Rafaelita

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? – Bedroom

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/"></a>
</div>

Note that this will only work for rectangular links.

Eisteddfod

+1 for the pure CSS option, even if it's not inverting the image. – Uncanny

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. – Talipes

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.

Janitress

Refer this example for using MapHilight: https://mcmap.net/q/1015160/-using-maphilight-for-total-beginners – Uticas

Answer 3

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

Washday

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.

Malodorous