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

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。