- PR -

【JavaScript】レイヤーをmapに重ねるとareaが認識されない

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

会議室違いかもしれませんが、相談させてください。
前回、「リッチクライアント＆帳票」会議室にて相談させていただいたんですが、リアクションが一切無かったので「この会議室にはふさわしくない話題のかな」と思い、今回こちらにスレッドを立てさせていただきました。
よろしくお願いします。

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

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

私が現在実現させているのは、たとえば
　　日本地図（A.gif）の東京部分にカーソルを当てる
　　→東京部分だけ描かれている透過GIF（A_tokyo.gif）を日本地図（A.gif）に重ねて表示する （レイヤーを使用）
といった方法です。
ところが、map上にレイヤーを表示すると、areaタグのcoordsが認識されないようなのです。結果、A_tokyo.gifが表示された直後に消える、というような状態になってしまいます。

WEBでいろいろと調べてはみたのですが、解決策が見つかりません。
アドバイスをお願いします。

以下、ソースの一部です。

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


<div id="link"><br></div>
<img src="image/A.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>

</div>
</center>
</body>
</html>
かつのり
ぬし
会議室デビュー日: 2004/03/18
投稿数: 2015
お住まい・勤務地: 札幌
投稿日時: 2008-08-04 12:23
areaが認識されないというか、認識はされているでしょう。

レイヤを重ねた際に、マウスのカーソルの位置のオブジェクトが、
元画像ではなく、レイヤ表示の画像であるため、
元画像のmouseoutイベントが発生しているのでしょう。

レイヤの画像の方にmouseoutイベントを付けてみては？
いっし〜
会議室デビュー日: 2006/11/07
投稿数: 11
投稿日時: 2008-08-04 13:33
引用:

かつのりさんの書き込み (2008-08-04 12:23) より:
areaが認識されないというか、認識はされているでしょう。

レイヤを重ねた際に、マウスのカーソルの位置のオブジェクトが、
元画像ではなく、レイヤ表示の画像であるため、
元画像のmouseoutイベントが発生しているのでしょう。

レイヤの画像の方にmouseoutイベントを付けてみては？


>かつのりさん
お早い返答、ありがとうございます。
さっそく試してみます。
取り急ぎお礼まで。
いっし〜
会議室デビュー日: 2006/11/07
投稿数: 11
投稿日時: 2008-08-04 13:46
引用:

いっし〜さんの書き込み (2008-08-04 13:33) より:
引用:

かつのりさんの書き込み (2008-08-04 12:23) より:
areaが認識されないというか、認識はされているでしょう。

レイヤを重ねた際に、マウスのカーソルの位置のオブジェクトが、
元画像ではなく、レイヤ表示の画像であるため、
元画像のmouseoutイベントが発生しているのでしょう。

レイヤの画像の方にmouseoutイベントを付けてみては？


>かつのりさん
お早い返答、ありがとうございます。
さっそく試してみます。
取り急ぎお礼まで。


mouseoutイベントを付加しましたが、レイヤーの画像が透過GIFだってことを忘れていました。
レイヤーのA_tokyo.GIFは、日本地図A.GIFの東京部分のみに色がついており、他は透過となっています。（日本地図A.GIFと画像サイズ、東京の座標位置は一緒）
東京部分からmouseoutした際にイベントを発生させたいのですが、画像そのものからmouseoutしないとイベントが発生しませんでした。

以下、修正を加えた箇所です。

document.getElementById('map_over').innerHTML='<img id="map_over_img" src=\"img/img_map/allarea/all_afr_o.gif\" width=505 height=295 border=0 OnMouseOut="on_mouse_out()" style=\"position:absolute;z-index:1;top:0px;left:0px;\">';

いっし〜
会議室デビュー日: 2006/11/07
投稿数: 11
投稿日時: 2008-08-04 14:23
自己レスです。

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

・日本地図（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）