2

例如，这就是我现在拥有的图像地图，使用图像映射网站制作。

<div style="width:138px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_9201305251918089" src="http://www.image-maps.com/uploaded_files/9201305251918089_1_pizzaa.png" usemap="#Image-Maps_9201305251918089" border="0" width="138" height="71" alt="" />
<map id="_Image-Maps_9201305251918089" name="Image-Maps_9201305251918089">
<area shape="poly" coords="3,3,56,5,19,41,9,26," href="http://www.image-maps.com/home" alt="home" title="home"   />
<area shape="poly" coords="64,11,26,49,41,57,61,62," href="http://www.image-maps.com/links" alt="links" title="links"   />
<area shape="poly" coords="71,10,74,64,92,57,106,49," href="http://www.image-maps.com/about" alt="about" title="about"   />
<area shape="poly" coords="117,40,129,22,133,4,80,5," href="http://www.image-maps.com/botm" alt="botm" title="botm"   />
</map>
</div>

http://jsfiddle.net/suv8R/

然而，这正是我想要实现的。

<style type="text/css">
#container {
position:fixed;
width:138px;
height:71px;
margin:10px;
background-color:yellow
}
#slice1 {
height:20px;
width:20px;
position:absolute;
margin-top: 0px;
margin-left:0px;
}
#slice1 img:hover {
margin-top: 3px;
margin-left:-8px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice2 {
position:absolute;
margin-top: 4px;
margin-left:21px;
}
#slice2 img:hover {
margin-top: 8px;
margin-left:-3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice3 {
position:absolute;
margin-top: 1px;
margin-left:69px;
}
#slice3 img:hover {
margin-top: 8px;
margin-left:3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice4 {
position:absolute;
margin-top: 2px;
margin-left:72px;
}
#slice4 img:hover {
margin-top: 3px;
margin-left:8px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slice1 img, #slice2 img, #slice3 img, #slice4 img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
<body>
<div id="container">
<div id="slice1"><a href="/" title="home"><img src="http://static.tumblr.com/8xsfla2/NWbmnda37/slice1.png"></a></div>
<div id="slice2"><a href="/" title="link2"><img src="http://static.tumblr.com/8xsfla2/Nmjmnda5b/slice2.png"></a></div>
<div id="slice3"><a href="/" title="link3"><img src="http://static.tumblr.com/8xsfla2/jAImnda5o/slice3.png"></a></div>
<div id="slice4"><a href="/" title="link4"><img src="http://static.tumblr.com/8xsfla2/KR0mnda62/slice4.png"></a></div>
</div>
</body>

http://jsfiddle.net/YPsdj/1/

如您所见，每个切片都是一个链接，当我将鼠标悬停在它上面时，我希望每个切片滑出。第二个例子的问题是每个切片都是一个透明的png，所以每个png图像的透明部分与其他的重叠，所以悬停在整个切片上不起作用（尤其是第一个和第三个切片）。

因此，如果有人对如何使此类链接有效工作有任何解决方案，我们将不胜感激。

谢谢！

4

0 回答 0