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

Question

我有一张人体骨骼的图像，其中包含大约 60 个区域，我想突出显示并使其可点击。它们围成一圈，从 1 到 60 编号。

整个想法是我想点击数字（在图像上）并突出显示图像的那部分。

我使用 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

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

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

经过一些实验，我发现<area> 上的style 属性不能用于设置背景颜色，因此您需要其他东西来强制颜色。我建议通过以下方式将<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，则将 src 替换为图像“Images/Figure_Human_Image1_h1.png”

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

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

Answer 3

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

您可以创建 60 张各种高亮骨骼的图像，然后使用 JavaScript，将图像的来源切换为具有正确高亮显示的图像