How can I highlight only certain areas of an image?

Question

I've got an image of a human skeleton with approx 60 areas I want to highlight and make clickable. Those are in a circle and numbered from 1-60.

The whole idea is I want to click on the nubmers (on the image) and highlight that part of the image.

I've used JQuery to hover over the numbers/area and highlight (hover over with mouse) and when the user clicks on the number I'm getting the clicked number and processing on the server side code. (.NET C#)

But I want the place where I click should remain the colour... Hovering over the number and changing the colour works fine... But I want when it's click the colour should change on the image / persisted...

Below are the samples which changes the colour when you hover over with your mouse, but when you click the colour is not changing.

http://davidlynch.org/js/maphilight/docs/

http://davidlynch.org/js/maphilight/docs/demo_simple.html

any ideas how to highlight the some areas on the image?

sample code below:

 <img class="map" src="Images/Figure_Human_Image1.png" alt="" usemap="#Skeleton17"  / >
 <map name="Skeleton17" >
 <area title="1" alt="1" href="#" shape="circle" coords="13,174,7" / >
 <area title="2" alt="2" href="#" shape="circle" coords="27,159,7" / >

Answer 1

The answers about swapping out images will work. That said, by doing this in images, you end up using more bandwidth than you really need to use for this. One of two things will happen: either people will download a bunch of images that they never load, or they will have to wait to download the new image each time they click. For users with a high speed connection, that's not going to be an issue, but there is definitely room for users on slow connections (or perhaps mobile devices) to experience this as a negative.

Better would be to only have one version of the image, which is what it looks like on the first load. The trick is to make the numbers on the image transparent. Then you can just have the user's browser change the background color when they click. And as a bonus, if you ever want to add other colors to indicate other things, that's simple too! And you can have any combination of numbers highlighted.

After some experimentation, I found that the style attribute on the <area> can't be used to set background colors, so you would need something else to enforce the colors. I suggest a <div> positioned in the same place as each circle via something like: <div id='div1' style='position:relative; top:-400px; left:5px; height:30px; width:30px; z-index:-1'>&nbsp;</div> where you would adjust the top/left values to place it where you need it. The z-index:-1 is important to make it show up behind the image. To experiment with the placing of these divs, you may want to go ahead and set the background-color to something so that you can see them.

Once you have a transparent image and have all of the divs placed, you'd just need a bit of jQuery to activate it. Something like this:

$('area').click(function(){
    var number = $(this).attr('title');
    $('#div'+number).css('background-color', 'red');
})

Answer 2

As Greg B suggested, you could create the skeletons images just changing the highlighted number such as:

Images/Figure_Human_Image1.png    : this is your original image with no highlight
Images/Figure_Human_Image1_h1.png : this is the skeleton image with number 1 highlighted
Images/Figure_Human_Image1_h2.png : this is the skeleton image with number 2 highlighted
and so on...

Then you use jquery to switch the source of the image with the correct image highlighted been replaced. If the user clicked on number 1 than you replace the src with the image 'Images/Figure_Human_Image1_h1.png'

You can do that by adding a click event in area through jquery. In your case the title attribute of the tag area correspond to the number clicked so it would be something like this:

$('area').click(function(){
    var number = $(this).attr('title');
    $('img').attr('src','Images/Figure_Human_Image1_h'+number+'.png');
})