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

Question

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

我正在做这个项目的公司有用于 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 元素。

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