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

Question

我有这样的想法，可以将图片（而不是文本）的各个部分分别链接到不同的页面或网站，而且我希望在不创建不同的照片的情况下完成这些任务，并且将它们彼此靠近以使其看起来像是一个全貌。 有没有人在这里有一个想法如何完成这种使用JavaScript的变种，如jQuery或纯JavaScript或什么的？ 谢谢！ :-)

Answer 1

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

有很多方法可以解决这个问题。

1. image map。

像下面给你可以创建图像的各种可点击的部分：

<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-position属性。像

<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> 

了解background-position

也看看Image Sprites

Answer 2

你试过HTML Image Maps ...？

image map是图片中图片内的区域是链接。创建一个图像涉及到使用<IMG ...>，<MAP ...>和<AREA ...>标签..

Answer 3

当然CSS就行了。 HTML：

<div id="linkPictureThing"> 
    <img src="yourimgage.png" title="" alt=""/> 
    <a href="" class="imageSection"></a> 
    <a href="" class="imageSection"></a> 
    <a href="" class="imageSection"></a> 
    <a href="" class="imageSection"></a> 
</div> 

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; 
} 

Answer 4

The最正确的语义方式是使用图像映射。

最简单的方法是在图像顶部放置一个div。在这个div在不同区域创建两个可点击的块。

使用以下代码在http://jsfiddle.net/3mQV2/上找到示例。这个例子的优点是搜索引擎可以索引两个链接。

HTML

<img src="http://lorempixel.com/400/200/" /> 
<div> 
    <a href="test1"></a><!-- 
--><a href="test2"></a>  
</div> 

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; 
}