|
|
イメージマップの指定箇所で説明を表示(onMouseover)
<html>
<head>
<title>イメージマップ</title>
<script language="JavaScript">
<!--
function msg(msg) {
document.form1.text1.value = msg + "です。";
}
//-->
</script>
</head>
<body bgcolor="#ffcc99">
<center>
<img src="../img/map.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>
実行する
|