Question

我有一张静态图片，其中包含网页上显示的地图。在图像内部有几个代表城市的点。我必须使每个点都成为可点击的链接，将用户重定向到另一个页面。我正在寻找最好的方法，记住一些点彼此接近。

我一直在想在图像顶部创建一个具有相同大小的div，然后在其中放置具有固定大小的较小div（实际上它们将是小方块），每个较小的div是一个链接。有没有更好的方法呢？

Answer 1

<area>标记用于定义图像映射中的区域（图像映射是具有可点击区域的图像）。

元素始终嵌套在<map>标记内。

标签中的usemap属性与元素的name属性相关联，并在图像和地图之间创建关系。

希望这会对你有所帮助。：）

Example

Answer 2

我认为您的想法听起来不错<div>和<a>。我宁愿选择那种方法而不是<map>。因为您可以根据需要自由地设计样式，并且更容易使其变得动态。你甚至可以更进一步，然后我在演示中做了一个<div>而不是点击区域，如果你愿意，在中间有一个点代表一个区域（如果这有意义吗？）

DEMO

<div class="map__image">
    <a href="#" id="first" class="map__link"></a>
    <a href="#" id="second" class="map__link"></a>
    <a href="#" id="third" class="map__link"></a>
</div>

.map__image {
    background: url(https://lh5.ggpht.com/RPZEPRAtdW4lSTE0v1vXe8z9GEmgMSp84ZCEmdb8SJ5-acTtcnvgFjwjWsK7hiejzjQ=w300) no-repeat;
    width: 300px;
    height: 300px;
    position: relative;
}

.map__link {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: red;
}

#first {
    top: 30px;
    left: 100px;
}

#second {
    top: 100px;
    left: 200px;
}

#third {
    top: 220px;
    left: 150px;
}

Answer 3

正如@zzzzBov所说，<map>元素应该可以解决问题。

您可以在此处查看相关文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

它使用<area>元素映射可点击区域，这些区域可以充当链接。有关<area>元素及其属性的更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

HTML / CSS：在图像中放置链接

3 个答案: