如何仅突出显示图像的某些区域？

Question

我有一个人体骨骼的图像,有大约60个区域,我想要突出显示并使其可点击.它们是一个圆圈,编号为1-60.

整个想法是我想点击nubmers(在图像上)并突出显示该部分图像.

我已经使用JQuery将鼠标悬停在数字/区域上并突出显示(用鼠标悬停),当用户点击数字时,我将获得点击的数字并处理服务器端代码.(.NET C#)

但是我希望我点击的地方应该保持颜色...将数字悬停在数字上并改变颜色工作正常......但是我想要点击颜色应该在图像上更改/持久...

下面是使用鼠标悬停时更改颜色的示例,但是单击时颜色不会更改.

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

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

任何想法如何突出图像上的一些区域？

示例代码如下:

 <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

关于交换图像的答案将会起作用。也就是说，通过在图像中执行此操作，您最终会使用比实际需要的更多的带宽。将会发生以下两种情况之一：要么人们会下载一堆他们从未加载的图像，要么他们每次单击时都必须等待下载新图像。对于高速连接的用户来说，这不会成为问题，但对于低速连接（或者可能是移动设备）的用户来说，这绝对有可能带来负面影响。

最好只有一个版本的图像，这就是第一次加载时的样子。诀窍是使图像上的数字透明。然后，您可以让用户的浏览器在单击时更改背景颜色。作为奖励，如果您想添加其他颜色来指示其他事物，那也很简单！您可以突出显示任意数字组合。

经过一些实验，我发现style上的属性<area>不能用于设置背景颜色，因此您需要其他东西来强制颜色。我建议<div>通过以下方式将其放置在与每个圆圈相同的位置： <div id='div1' style='position:relative; top:-400px; left:5px; height:30px; width:30px; z-index:-1'>&nbsp;</div>您可以在其中调整顶部/左侧值以将其放置在您需要的位置。z-index:-1让它出现在图像后面很重要。要尝试放置这些 div，您可能需要继续设置背景颜色，以便您可以看到它们。

一旦你有了透明图像并放置了所有的 div，你只需要一些 jQuery 来激活它。像这样的东西：

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