1

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

现在我有两个问题。

  1. 我用于放置图标的 CSS 无处不在。它有效，但我有奇怪的坐标。（在 1000 像素 x 600 像素的图像中，一些坐标距离左侧 1000 像素，但图标位于页面中间等）

  2. 我尝试了几个 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;
}

（ETC）

谢谢你的帮助。

卡西

4

1 回答 1

0

你不能通过 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;
}
于 2013-07-30T15:28:03.387 回答