可以使用jQuery或Javascript将图片的特定部分用作链接吗？
我有这个想法，使图片（不是文本）的单独和各个部分链接到不同的页面或网站，我想要完成而不是实际创建不同的照片并将它们彼此靠近所以看起来它是一个完整的图片。 这里有没有人知道如何使用JavaScript的变种来实现这一点，比如jQuery或纯JavaScript或者什么？ 谢谢！ 🙂
我想，你想让图像的各个部分互动。 即用户应该导航到不同的位置，点击图像的不同部分或执行一些动画。
有多种方法可以解决这个问题。
- 图像映射 。
您可以在图像上创建各种可点击的部分，如下所示：
2 。 创建各种紧密定位的div（或任何其他合适的容器，甚至是img标签本身），并使用CSS： Background-position属性。 就像是
了解有关背景位置的更多信息
还可以看看Image Sprites
你试过HTML图像地图吗？
图像映射是图片中的区域是链接的图片。 创建图像涉及使用
和
肯定的CSS会做。 HTML：
CSS：
a,img{border:none;} #linkPictureThing>img{ width:100%; height:100%;/*or auto */ z-index:-1; }
链接：
#linkPictureThing>a.imageSection{ display:inline-block;/*Sorry [lt IE 8] lover*/ width:50%; height:50%; z-index:1; content:''; } a.imageSection:hover{ background:#FF0000; opacity:0.8; }
或者可以尝试使用链接进行相对/绝对定位以获得更独特的位置：
#linkPictureThing>a.imageSection:first-child{ position:absolute; top:20; left:0; }
最正确的语义方式是使用图像映射。
最简单的方法是在图像上放置一个div。 在这个div中，在不同区域上制作两个可点击的块。
使用以下代码在http://jsfiddle.net/3mQV2/上找到的示例。 此示例的优点是搜索引擎可以索引两个链接。
HTML
CSS
img { width:400px; height:200px; position:absolute; } div { width:400px; height:200px; position:relative; } div a { display:inline-block; width:200px; height:200px; } div a:nth-child(1):hover { background-color:blue; } div a:nth-child(2):hover { background-color:red; }