Question

我还是有点新手并且有一个很大的问题。对于大学项目，我正在尝试创建一个带有图标的地图。基本上，所有这些都是图像 - 地图图像和几个图标图像。我已经用css将图标放在地图上。现在我试图在鼠标悬停时创建图标的缩放效果。（图标是超链接，因此点击会指向新页面。）

现在我有两个问题。

我放置图标的CSS到处都是。它有效，但我有奇怪的坐标。（在1000px x 600像素的图像中，一些坐标从左侧开始是1000像素，但图标位于页面中间且类似的东西）
我已经尝试了几个jquery插件，但每当我将它们附加到一个图标时，图标就会消失（在后面）地图，或者可以在网站的其他地方找到。或者有时它根本不起作用。我尝试了几种不同的插件......

以下是我正在使用的代码的一些片段。用于放置图标：

    <div id="content">
    <div class="mapwrapper" align="center">
<img src="images/map.png" width="1010" height="620px" alt="Map of Dublin"/> 

<a href="bolands.php"><img class="icon" src="images/iconbolands.png" id="bolands" /></a>
<a href="cityhalldubcastle.php"><img class="icon" src="images/iconcityhall.png" id="cityhall" /></a>
<a href="fourcourts.php"><img class="icon" src="images/iconfourcourts.png" id="fourcourts" /></a>



</div> <!-- /mapwrapper-->

和css：

#content {
padding-top:20px;
padding-bottom:50px;
    height:675px;
clear:both; 

 }


#mapwrapper {
position:relative; 
width: 1020px; 
height: 630px;
margin-left:auto;
margin-right:auto;

 }


#content img {

position:relative;
z-index:0;

}
.icon {
position:absolute;
}

#bolands{
bottom:480px;
right:-700px;
z-index:10;
}

#cityhall {
bottom:435px;
right:90px;
z-index:15;
}

（等）

感谢您的帮助。

KATHI

Answer 1

你不能通过CSS :hover伪类和过渡放大（假设你的意思是放大）吗？

请参阅此处（明显加载了其他图片）：http://jsfiddle.net/TCDMn/

#content {
padding-top:20px;
padding-bottom:50px;
    height:675px;
clear:both; 

 }


#mapwrapper {
position:relative; 
width: 1020px; 
height: 630px;
margin-left:auto;
margin-right:auto;

 }


#content img {


z-index:0;

}
.icon {
position:absolute;
    height:50px;
    width:50px;
    transition: all 2s;
    -webkit-transition: all 2s; /* Safari */
}
.icon:hover {
    height:75px;
    width:75px;
}
#bolands{
bottom:480px;
right:-700px;
z-index:10;
}

#cityhall {
bottom:435px;
right:90px;
z-index:15;
}

在图像上放置图标和缩放

1 个答案: