• 締切済み

<map>の切り替え

ウェブサイトを作っているのですが、たぶんJavaScriptだとできると思うのでどなたか分かればと思い、投稿しました。 操作的には、 <body> <div><img src="aaa.gif" usemap="#map01" border="0" name="changeImage"></div> <!--▼クリックエリア範囲01の場合--> <map name="map01"> <area shape="rect" coords="0,0,30,30" href="javascript:document.changeImage.src='bbb.gif'";> </map> <map name="map02"> <!--▼クリックエリア範囲01の場合--> <area shape="rect" coords="0,0,20,20" href="bbb.html"> </map> </body> のような感じで、初期設定のusemapがmap01なので、最初クリックする時は、map01のクリックエリア範囲でそのaaa.gifがbbb.gifに変わります。そして、bbb.gifに変わったとき、クリックエリア範囲を<map name="map02">にしたいのです。 できますでしょうか? 一応補足しておきますが、操作的には違う画面を出すとか、新しい画面に行った時、とかではないです。 同じ画面上の操作です。

みんなの回答

  • godakaz
  • ベストアンサー率72% (16/22)
回答No.1

<html> <head></head> <body> <div><img name="img0" id="img0" src="aaa.gif" usemap="#map01" border="0"></div> <!--▼クリックエリア範囲01の場合--> <map name="map01"> <area shape="rect" coords="0,0,30,30" href="javascript:void(0);" onClick="window.document.getElementById('img0').src='bbb.gif'; window.document.getElementById('img0').useMap='#map02'; return false;"></area> </map> <map name="map02"> <!--▼クリックエリア範囲01の場合--> <area shape="rect" coords="0,0,20,20" href="bbb.html"></area> </map> </body> </html>

関連するQ&A