javascript - 如何让 map 区域背景颜色改变？

Question

我现在有一个有趣的元素。这包括为用户构建交互图以探索新的工业机器。这个想法是用户将看到机器的二维图像并能够点击某些区域。当他们点击这些时，它将加载该单独部分的另一张图片，然后可以再次点击该图片以查看更多详细信息。

我正在做这个元素的公司拥有用于 3D 建模的 CAD 软件，可以旋转等等...所以我想出的想法是让他们在他们的 CAD 软件上拍摄每个零件的屏幕截图.

假设我有基本图像，对于这个例子，我将使用如下所示的汽车模型。

现在，当用户鼠标悬停在引擎上时，我希望引擎颜色变为橙色，然后在单击时加载引擎图像。

现在我已经解释了我要尝试做的事情，我将继续解决我的问题。我用过在线 map 生成器 www.image-maps.com，看起来不错。所以我在引擎周围绘制以创建热点。这是我得到的 html 输出。

<img id="Image-Maps-Com-image-maps-2015-11-26-071629" src="http://www.image-maps.com/m/private/0/9ob5qc47m8e6irp0caqh20qik2_car.gif" border="0" width="475" height="311" orgWidth="475" orgHeight="311" usemap="#image-maps-2015-11-26-071629" alt="" />

<map name="image-maps-2015-11-26-071629" id="ImageMapsCom-image-maps-2015-11-26-071629">
<area shape="rect" coords="473,309,475,311" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_64839" />
<area id="engine" alt="" title="" href="http://www.image-maps.com/" shape="poly"coords="155,128,141,131,125,134,121,134,110,132,102,132,106,141,104,153,103,162,100,169,97,171,89,173,99,181,104,191,106,198,125,199,142,201,150,198,156,193,165,187,168,181,177,191,184,187,178,172,180,165,181,159,175,152,173,145,168,138,168,132,164,128" style="outline:none;" target="_self" />
</map>

这是 jsfiddle，因此您可以更直观地看到它 jsfiddle

通过代码，我可以看到当我的光标越过引擎的 map 区域时，光标变为指针。但是当我尝试更改 map 区域的背景颜色时，没有任何反应。

#engine:hover{
    background-color:red;
}

$('#engine').hover(function() { $(this).css('background-color','red') } );

以上方法都不行。如果我更改 <area>标记为 <div>那么我就看不到热点了。

有谁知道我可以做些什么来解决这个问题？

Answer 1

问题是图像映射没有在热点处创建 DOM 元素。

一种解决方法是加载一个新图像(突出显示引擎)并在每次用户将鼠标悬停在引擎上时加载它。您也可以对其他映射的热点重复此操作(每个都有一个新图像)，但是如果您有很多热点，这不是一个好的解决方案，因为您需要加载许多不同的图像。在这里查看 another answer to the same question .