如何使地图区域背景颜色发生变化？

Question

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

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

假设我有基本图像，在本示例中，我将使用如下所示的汽车模型。

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

所以现在我已经解释了我正在尝试做的事情，我将继续解决我的问题。我使用了在线地图生成器 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

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

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

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

以上方法都不起作用。如果我将<area> 标签更改为<div>，那么我将看不到热点。

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

Answer 1

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

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