Javascript 如何更改地图区域背景颜色？

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

该公司我做的项目有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>

以上两种方法都不起作用。如果将

标记更改为

，则无法看到热点

---

有人知道我能做些什么来解决这个问题吗？

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

---

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

AFAIK，

area

元素不受CSS的影响……您最好使用SVG。可能重复-正如我所看到的，您生成了图像映射，在生成图像映射时，您可以在事件部分中选择鼠标悬停在图像上。

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

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