イメージマップの指定箇所で説明を表示(onMouseover)
<html> <head> <title>イメージマップ</title> <script language="JavaScript"> <!-- function msg(msg) { document.form1.text1.value = msg + "です。"; } //--> </script> </head> <body bgcolor="#ffcc99"> <center> <img src="../../sample/img/map2.jpg" border="1" width="600" height="500" usemap="#tizu" alt="地図"> <map name="tizu"> <area shape="rect" coords="50,450,150,500" onMouseover="msg('□□駅です。ここからタクシーで約5分・徒歩で約20分')"> <area shape="rect" coords="50,250,85,285" onMouseover="msg('ラーメン屋')"> <area shape="rect" coords="50,315,85,350" onMouseover="msg('××銀行')"> <area shape="rect" coords="115,250,150,285" onMouseover="msg('とんかつ屋')"> <area shape="rect" coords="115,315,150,350" onMouseover="msg('コンビニ')"> <area shape="rect" coords="250,250,285,285" onMouseover="msg('○○病院')"> <area shape="rect" coords="250,315,285,350" onMouseover="msg('交番')"> <area shape="rect" coords="315,250,350,285" onMouseover="msg('そば屋')"> <area shape="rect" coords="315,315,350,350" onMouseover="msg('○○銀行')"> <area shape="rect" coords="450,250,485,285" onMouseover="msg('コンビニ')"> <area shape="rect" coords="450,315,485,350" onMouseover="msg('消防署')"> <area shape="rect" coords="515,250,550,285" onMouseover="msg('ガソリンスタンド')"> <area shape="rect" coords="515,315,550,350" onMouseover="msg('△△書店')"> <area shape="rect" coords="450,90,485,125" onMouseover="msg('すし屋')"> <area shape="rect" coords="515,65,550,100" onMouseover="msg('郵便局')"> <area shape="rect" coords="450,50,485,85" onMouseover="msg('当店')"> <area shape="circle" coords="100,300,17" onMouseover="msg('駅入口交差点')"> <area shape="circle" coords="300,300,17" onMouseover="msg('○○1丁目交差点')"> <area shape="circle" coords="500,300,17" onMouseover="msg('○○2丁目交差点')"> <area shape="circle" coords="400,267,17" onMouseover="msg('バス停です。ここから徒歩で約5分')"> </map> <form name="form1" action="" method=""> <input type="text" name="text1" style="width:600px;color:#f0f;font-size:20px;text-align:center"> </form> </center> </body> </html>
〔 実行する 〕