在圖像上放置圖標和放大

Question

我仍然是一個newby和有一個巨大的問題。對於大學項目，我試圖創建一個帶有圖標的地圖。基本上，所有這些都是圖像 - 地圖圖像和幾個圖標圖像。我已經用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）

感謝您的幫助。

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