- PR -

【JavaScript】クリッカブルマップ＋ロールオーバー

1
投稿者投稿内容
いっし〜
会議室デビュー日: 2006/11/07
投稿数: 11
投稿日時: 2008-07-28 15:52
お世話になっております。

現在、以下のような挙動をするWebページを作成しています。
　1)画像の一部にカーソルを当てると、指定箇所に違う画像が表示される
　2)画像の一部をクリックすると、別のクリッカブルマップが表示される
イメージとしては、以下のサイトの「地図から探す」です。
地図情報検索：マピオン（http://www.mapion.co.jp/）

ここで、1)に関してご教授いただきたく思います。

私が現在実現させているのは、たとえば
　　日本地図（A.gif）の東京部分にカーソルを当てる
　　→日本地図（A.gif）の東京部分だけ違う色で塗り変えた画像（A_.gif）を表示する
といった方法です。

これを、
　　日本地図（A.gif）の東京部分にカーソルを当てる
　　→日本地図（A.gif）の東京部分を、東京部分だけの画像（A_tokyo.gif）に差し替えて表示する
といった方法で実現したいのです。

※東京部分だけの画像（A_tokyo.gif）は、日本地図（A.gif）の東京以外の部分を透過GIFにしており、東京都の位置座標は両画像とも同じです。

座標が同じなので、座標を指定して差し替えができないだろうか、
透過GIFなので画像A.gifに画像A_tokyo.gifを重ねられないだろうか、など、
自分なりに考えてみたのですが、いまいち方法がつかめません。

アドバイスがありましたら、ぜひお願いいたします。

以下、現在のソースです。

<html>
<head>
<title>クリッカブルマップ</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis"/>
<script language="JavaScript">
<!--
//フォーカスon
function f(kind) {
switch(kind){
case 0:
document.images["japan_map"].src="image/A_.gif";//東京部分だけ色の違う日本地図
break;
default:
break;
}
}

//フォーカスoff
function unf(kind) {
switch(kind){
case 0:
document.images["japan_map"].src="image/A.gif";//日本地図
break;
default:
break;
}
}

//クリッカブルマップの変更
function c(kind) {
switch(kind){
case 0:
break;
case 1://東京都のクリッカブルマップに変更
wl(0);
document.images["japan_map"].src="image/tokyo_all.gif";
document.images["japan_map"].useMap="#tokyo_all";
break;
default:
break;
}
}
-->
</script>
</head>
<body>
<center>
</div>


<div id="link"><br></div>
<img src="image/A.gif" width=608 height=430 NAME="japan_map" usemap="#japan_all" border=0 >

<map name="japan_all">
<area shape="poly" coords="座標" OnMouseOver="f(0)" OnMouseOut="unf(0)" OnClick="c(1)" alt="東京都">
<area />
</map>

<map name="tokyo_all">
<area />
<area />
</map>

</div>
</center>
</body>
</html>
いっし〜
会議室デビュー日: 2006/11/07
投稿数: 11
投稿日時: 2008-08-05 09:57
自己レスです。

逆転？の発想で、こんな方法を思いつきました。
無理矢理感が漂っている気もしますが･･･

・日本地図（A.GIF）を背景にする。
・map用画像として、全透過GIFを利用する。
・背景とmap用画像との間に、ロールオーバー用画像を配置する。

階層は、以下のようになります。
【最前面】全透過GIF
【　B1層】ロールオーバー画像（A_tokyo.GIF）　　　
【最背面】日本地図（A.GIF）


<html>
<head>
<title>クリッカブルマップ</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis"/>
<script language="JavaScript">
<!--
//フォーカスon
function f() {
document.getElementById('map_over').innerHTML='<img id="map_over_img" src=\\\\\\\\"A_tokyo.gif\\\\\\\\" width=505 height=295 border=0 style=\\\\\\\\"position:absolute;z-index:-1;top:0px;left:0px;\\\\\\\\">';
}

//フォーカスoff
function unf(kind) {
document.getElementById('map_over').innerHTML='';
}
-->
</script>
</head>
<body>
<center>
</div>
<table background="image/A.gif">
<tr><td>

<div id="link"><br></div>
<!--map用画像には全透過GIFを使用-->
<img src="image/touka.gif" width=608 height=430 NAME="japan_map" usemap="#japan_all" border=0 >

<div id="map_over"></div>
<map name="japan_all">
<area shape="poly" coords="座標" OnMouseOver="f()" OnMouseOut="unf()" OnClick="JavaScript:void(0);" alt="東京都">
<area />
</map>

</td></tr>
</table>
</div>
</center>
</body>
</html>
1

スキルアップ／キャリアアップ（JOB@IT）