将图像的不同部分链接到不同的 url

Question

我正在尝试为我的网站制作一个社交媒体页面，我希望将不同的社交媒体图标链接到我的每个社交媒体页面。我尝试使用地图标签，但图像分辨率根据浏览器而变化。我知道，如果我将其设为绝对图像，它可能会解决此问题，但使用绝对坐标似乎是一个非常有缺陷的设计。有没有一种方法可以用 url 标记图标，无论屏幕分辨率如何，这些图标都会固定在正确的位置？

这是带有我正在讨论的图标的图像：

谢谢你！

Answer 1

一个solotiun可以使用html的MAP标签（它是跨浏览器的），这样的网站可以帮助您获得正确的坐标，请参阅此DEMO。但这样它并不是真正的响应式，那么我建议你使用这个 JQuery 插件（有一个DEMO）来使<map>标签更具响应性。

$(document).ready(function(){
    $('img[usemap]').rwdImageMaps();
});

/* You can see that it's responive */
img {
    width: 300px;
    height: 380px;
}

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
</head>
<body>
<img src="https://i.stack.imgur.com/sMtTr.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="instantgram" href="#" shape="rect" coords="77,346,177,447" />
    <area alt="" title="gmail" href="#" shape="rect" coords="203,576,314,683" />
    <area alt="" title="..." href="#" shape="rect" coords="474,579,582,688" />
    <area alt="" title="..." href="#" shape="rect" coords="605,344,716,451" />
    <area alt="" title="..." href="#" shape="rect" coords="471,104,582,216" />
    <area alt="" title="..." href="#" shape="rect" coords="205,106,319,216" />
</map>
</body>
</html>