可以使用jQuery或Javascript将图片的特定部分用作链接吗？

Question

我有这个想法,使图片(不是文本)的单独和各个部分链接到不同的页面或网站,我想要完成而不是实际创建不同的照片并将它们彼此靠近所以它看起来像是一个完整的图片.这里有没有人知道如何使用JavaScript的变种来实现这一点,比如jQuery或纯JavaScript或其他东西？谢谢!:-)

Answer 1

我想,你想让图像的各个部分互动.即用户应该导航到不同的位置,点击图像的不同部分或执行一些动画.

有多种方法可以解决这个问题.

1. 图像映射.

您可以在图像上创建各种可点击的部分,如下所示:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

2.创建各种紧密定位的div(或任何其他合适的容器,甚至是img标签本身),并使用CSS:Background-positionproperty.就像是

    <div style="background-image:url('myImage.png'); background-position:0 0; width:50px height:50px" >
    </div>
  <div style="background-image:url('myImage.png'); background-position:50 0; width:50px height:50px" >
    </div>
  <div style="background-image:url('myImage.png'); background-position:0 50; width:50px height:50px" ></div>
  <div style="background-image:url('myImage.png'); background-position:50 50; width:50px height:50px" >
</div>

了解有关背景位置的更多信息

还可以看看Image Sprites