Question

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

整个想法是我想点击nubmers（在图像上）并突出显示该部分图像。

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

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

以下是使用鼠标悬停时更改颜色的示例，但单击时颜色不会更改。

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

How to PERMANENT highlight on the image

Answer 1

关于交换图像的答案将有效。也就是说，通过在图像中执行此操作，您最终会使用比实际需要更多的带宽。将发生以下两件事之一：人们将下载一堆他们从未加载的图像，或者每次点击时他们都必须等待下载新图像。对于具有高速连接的用户来说，这不会成为一个问题，但是对于慢速连接（或者可能是移动设备）的用户来说，确实有空间来体验这一点。

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

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

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

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

Answer 2

正如Greg B建议的那样，您可以创建骨架图像，只需更改突出显示的数字，例如：

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

然后使用jquery切换图像源，并突出显示已更换的正确图像。如果用户单击数字1而不是用图像'Images / Figure_Human_Image1_h1.png'替换src

您可以通过jquery在area中添加点击事件来实现。在您的情况下，标签区域的title属性对应于单击的数字，因此它将是这样的：

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

Answer 3

我认为您不需要任何服务器端代码。

您可以创建各种突出显示的骨架的60个图像，然后使用JavaScript，将图像的来源切换为具有正确突出显示的图像的来源

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

3 个答案: