将超过1个ID应用于图像

Question

我想在我的网站上添加爱尔兰的图像。爱尔兰由32个县组成;我想要做的是允许用户点击一个县，这将带他们到一个关于该县的更详细的页面。此外，该县的外观将在悬停时发生变化。

为了实现这一点，我希望为同一个元素提供多个ID。这可能吗？

Answer 1

我没有看到一个问题，但为什么不简单地将一个类与一个id一起使用???

<img src="#" id="firstID" class="thisImage">

然后只需使用#firstID.thisImage或#firstID或.thisImage来选择图片。

Answer 2

您不想为此使用ID，因为ID是唯一的，并且用于表示一个对象。

相反，请尝试使用以空格分隔的类：

<div class="county ireland" id="mayo"></div>
<div class="county ireland" id="clare"></div>

然后，你可以像这样引用它们：

#mayo {
    /* Styling for a specific div */
}

.county {
    /* Styling for all county divs */
}

.ireland {
    /* Styling for Ireland counties */
}

.county: hover {
    /* Styling when counties are hovered over */
}

Answer 3

每个元素不能超过一个id。您描述的目标表明您可以使用客户端图像映射，使用map元素实现，area元素指定图像中的区域和关联的URL。对于地理地图，您可能希望使用一些图像映射实用程序，它允许您以图形方式指定区域并为您生成标记（看起来很混乱，因为需要通过多边形顶点的坐标来指定各个县）

鼠标悬停时无法直接更改图像地图的区域。您需要使用图形程序生成32个版本的图像，每个版本都突出显示一个县，并在其中一个区域突出显示时更改整个图像。