我正在尝试为我的网站创建一个社交媒体页面，我希望将不同的社交媒体图标链接到我的每个社交媒体页面。我尝试使用 map 标签，但图像分辨率会根据浏览器而变化。我知道如果我把它做成绝对图像，它可能会解决这个问题，但使用绝对坐标似乎是一个非常有缺陷的设计。有没有办法用 url 标记图标，无论屏幕分辨率如何，这些图标都将固定在正确的位置？
这是我正在谈论的带有图标的图像:
谢谢!
最佳答案
一个solotiun可以使用MAP html 标签(它是跨浏览器的)和类似 this 的网站可以帮助您获得正确的坐标，请参阅此 DEMO .但是这样它不是真正的响应然后我建议你使用 this JQuery plug-in (有一个 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="http://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>关于html - 将图像的不同部分链接到不同的 url，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33551367/