将图片的不同部分链接到不同的网址 [英] Link different parts of an image to different urls
问题描述
我正在为我的网站创建一个社交媒体页面，并希望将不同的社交媒体图标链接到我的每个社交媒体页面。我试图使用地图标记，但图像分辨率基于浏览器更改。我明白，如果我把它作为一个绝对的图像，它可以解决这个问题，但使用绝对坐标似乎是一个非常有缺陷的设计。有没有一种方法可以用url来标记图标，而不管屏幕分辨率如何，这些图标都会保持固定的位置？
这是带有我正在谈论的图标的图像：
谢谢！
一个solotiun可以使用 MAP 标记的HTML（它是跨浏览器）和网站，如这可以帮助您获得正确的坐标，请参阅此 DEMO 。但是，这种方式并不是可以响应的，那么我建议你使用这个JQuery插件（这里有一个 DEMO ）make < map> 标记更具响应性。
/ *您可以看到它的响应* / 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.jpgalt =usemap =＃Map/>< map name =Mapid =Map> < area alt =title =instantgramhref =＃shape =rectcoords =77,346,177,447/> < area alt =title =gmailhref =＃shape =rectcoords =203,576,314,683/> < area alt =title =...href =＃shape =rectcoords =474,579,582,688/> < area alt =title =...href =＃shape =rectcoords =605,344,716,451/> < area alt =title =...href =＃shape =rectcoords =471,104,582,216/> < area alt =title =...href =＃shape =rectcoords =205,106,319,216/>< / map>< / body>< / html>
I'm trying to make a social media page for my website and I would like to have different social media icons link to each of my social media page. I've tried to use the map tag but the image resolution changes based on browser. I understand that if I make it an absolute image that it may fix this but using absolute coordinates seems like a very flawed design. Is there a way of tagging the icons with urls that will stay fixed to the proper position regardless of screen resolution?
This is the image with the icons I was talking about:
Thank you!
One solotiun can be use the MAP tag of html (it's cross-browser) and sites like this can help you to get the right coordinate, see this DEMO. But this way it's not realyresponsive then I advice you to use this JQuery plug-in(there is a DEMO) for make <map> tag more responive.
$(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>
这篇关于将图片的不同部分链接到不同的网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
