2

我有这个想法，将图片的各个部分（不是文本）链接到不同的页面或网站，我想在不实际创建不同的照片并将它们彼此靠近的情况下完成，这样看起来就像是一张完整的图片. 这里有没有人知道如何使用 JavaScript 的一种变体来实现这一点，比如 jQuery 或纯 JavaScript 之类的？谢谢！:-)

4

4 回答 4

5

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

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

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

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

也看看图像精灵

于 2013-03-10T15:35:50.390 回答
1

您是否尝试过HTML 图像映射...？

图像映射是一张图片，其中图片中的区域是链接。创建图像涉及使用<IMG ...>、、<MAP ...>和<AREA ...>标签。

于 2013-03-10T15:34:03.643 回答
0

当然 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;
}
于 2013-03-10T15:43:45.547 回答
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;
}
于 2013-03-10T15:43:59.137 回答