さまざまな地理的地域に分割された英国の地図があります。ユーザーがセクションにカーソルを合わせると、テキストが表示されるようにしたいと思います。
私の質問は、これを行うための画像を取得する最良の方法は何ですか.
私が試した 1 つの方法は、完全に透明な背景を持つ固定サイズのキャンバス内の正しい場所に各領域の png ファイルを作成することです。これは、すべてのエリアを 1 つの完全なマップとして表示するという点で機能します。ただし、各画像セクションにハンドルを追加することはできません。それらは互いに積み重ねられているため、上部のセクションのみが使用可能です。
また、ホット スポットを定義するために「領域」を上に配置しようとしました。ただし、形状が複雑すぎるため、これも機能しませんでした...
これがhtml / cssマークアップです
<script type="text/javascript">
$(document).ready(function() {
$('#scot').hide();
$('#wales').hide();
$('#scotmap').click(function() {
$('#scot').show();
});
$('#img2').click(function() {
$('#wales').show();
});
});
</script>
<div id="wrapper">
<div id="img1" class="mappiece">
<img src="Images/map/scotland.png" alt="Scotland">
</div>
<div id="img2" class="mappiece">
<img src="Images/map/nw.png" alt="Scotland">
</div>
<div id="img3" class="mappiece">
<img src="Images/map/se.png" alt="Scotland">
</div>
<div id="img4" class="mappiece">
<img src="Images/map/wales.png" alt="Scotland">
</div>
<div id="img5" class="mappiece">
<img src="Images/map/ireland.png" alt="Scotland">
</div>
<div id="img6" class="mappiece">
<img src="Images/map/yarmouth.png" alt="Scotland">
</div>
<div id="img7" class="mappiece">
<img src="Images/map/york.png" alt="Scotland">
</div>
<div id="map" class="mappiece">
<area id="scotmap" shape="poly" coords="76,9,76,50,87,50,87,92,96,92,96,101,105,101,105,132,120,132,120,122,132,124,137,120,151,124,154,128,160,127,163,129,171,125,173,119,164,92,147,76,164,37,144,7" nohref alt="Scotland Map" />
</div>
</div>
<div id="text">
<div id="scot">
<p>Hello Scotland</p>
</div>
<div id="wales">
<p>Hello Wales</p>
</div>
</div>
body{background-color:#fff;}
#wrapper{
width:237px;
height:258px;
position: relative;
}
.mappiece {
position: absolute;
width:237px;
height:258px;
top:0;
left:0;
}
#img1 {
z-index:80;
}
#img2 {
z-index:20;
}
#img3 {
z-index:30;
}
#img4 {
z-index:40;
}
#img5 {
z-index:50;
}
#img6 {
z-index:60;
}
#img7 {
z-index:70;
}
正しい方向のポイントは大歓迎です。マウス オーバー /mouseout/click jquery イベントに関しては、これで問題ありません。私が苦労しているのは、まさに画像操作です。
敬具