[英]Can a specific part of a picture be used as a link using jQuery or Javascript?
我有这个想法,可以将图片的各个部分(而不是文字)链接到不同的页面或网站,而我想完成这些操作而无需实际创建不同的照片并将它们彼此靠近,因此看起来就像一张完整的图片。 这里有人对如何使用JavaScript的某种变体(例如jQuery或纯JavaScript或类似的东西)有想法吗? 谢谢! :-)
我想,您想使图像的各个部分具有交互性。 也就是说,用户应单击图像的不同部分导航到不同的位置或执行一些动画。
有多种解决方法。
您可以在图像上创建各种可点击的部分,如下所示:
<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>
了解有关背景位置的更多信息
还看一下图像精灵
您是否尝试过HTML Image Maps ...?
图像映射是一幅图片,其中图片内的区域是链接。 创建图像涉及使用<IMG ...>
, <MAP ...>
和<AREA ...>
标记。
当然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;
}
最正确的语义方式是使用图像映射。
最简单的方法是在图像上方放置一个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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.