私はまだ初心者で、大きな問題を抱えています。大学のプロジェクトで、アイコンを含むマップを作成しようとしています。基本的に、これらはすべて画像 (マップ画像といくつかのアイコン画像) です。cssで地図上にアイコンを配置しました。そして今、マウスオーバー時のアイコンのズーム効果を作成しようとしています。(アイコンはハイパーリンクになっているため、クリックすると新しいページに移動します。)
今、私には2つの問題があります。
アイコンを配置するための私の CSS はいたるところにあります。動作しますが、座標が変です。(1000px×600pxの画像で、左から1000pxの座標もあるが、アイコンがページの真ん中にあるなど)
いくつかの jquery プラグインを試しましたが、それらをアイコンにアタッチすると、アイコンが地図の後ろに消えるか、Web サイトの別の場所に完全に表示されます。または、まったく機能しない場合もあります。色々なプラグインを試した...
私が使用しているコードの一部を次に示します。アイコンの配置:
<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;
}
（等）
ご協力いただきありがとうございます。
カティ