兼六園の地図と金沢城の地図は名所の文字をクリックすると小さなウインドウが開いて画像と名前を表示するようになっていたのですが，地図を変更したついでに地図上の名所の文字にマウスを乗せるだけで，その名所の画像が出るように変えようと，試行錯誤してみました。
最初，地図は名所の文字をクリックすると小さなウインドウが開いて画像と名前を表示するようにしていたのですが，これはホームページビルダーのイメージマップの編集を利用してリンクを作成してから，ちょっと書き換えます。
ホームページビルダーのイメージマップの編集を利用してkyokusui.htmlというページにリンクするようにすると
<IMG src=”kenrokumei.gif” alt=”兼六園の園内の地図” width=”893″ height=”800″ border=”0″ ” >
という行が<IMG src=”kenrokumei.gif” alt=”兼六園の園内の地図” width=”893″ height=”800″ border=”0″ ” usemap=”#kenrokumei”>
という行に書き換えられ
<MAP name=”kenrokumei”>
<AREA href=”https://kimassi.net/kenrokumei/kyokusui.html” target=”_blank” shape=”rect” coords=”655,459,712,482″>
<AREA shape=”default” nohref>
</MAP>
という文が挿入されます。
新しい小さなウインドウを開く場合はＪａｖａスクリプトを利用するために</HEAD>より上の行に
<script language=”JavaScript”>
<!–
function opgazou(url,winname,size) { window.open(url,winname,size);
}
//–>
</script>
という文を挿入し
<MAP name=”kenrokumei”>
<AREA href=”https://kimassi.net/kenrokumei/kyokusui.html” target=”_blank” shape=”rect” coords=”655,459,712,482″>
<AREA shape=”default” nohref>
</MAP>
を
<MAP name=”kenrokumei”>
<AREA href=”#” onclick=”opgazou(‘https://kimassi.net/kenrokumei/kyokusui.html’,”,’width=240,height=220′);return false;” shape=”rect” coords=”655,459,712,482″>
<AREA shape=”default” nohref>
</MAP>
という具合に変更します。
次にマウスを地図上の文字にのせると小さい画像を表示するようにするには
<AREA href=”#” onclick=”opgazou(‘https://kimassi.net/kenrokumei/kyokusui.html’,”,’width=240,height=220′);return false;” shape=”rect” coords=”655,459,712,482″>
の部分を
<AREA href=”#” onMouseOver=”opgazou(‘https://kimassi.net/kenrokumei/kyokusui.html’,”,’width=240,height=220′);return false;” shape=”rect” coords=”655,459,712,482″>
に変更しました。これによってマウスを乗せることにより小さなウインドウが開いて画像と名前を表示するようになります。
でもポップアップブロッカーがオンになっていると表示されませんし，マウスを乗せる度に，新しいウインドウが開いて，閉じるには，ひとつずつ閉じないのといけないので面倒です。
そこでとりあえずマウスが離れるとウインドウが閉じるようにしようとしました。
<script language=”JavaScript”>
<!–
function opgazou(url,winname,size) { window.open(url,winname,size);
}
//–>
</script>
の部分にウインドウを閉じる命令を追加して
<script language=”JavaScript”>
<!–
function opgazou(url,winname,size) { window.open(url,winname,size);
}
function clgazou() { window.close();
}
//–>
</script>
にします。
<AREA href=”#” onMouseOver=”opgazou(‘https://kimassi.net/kenrokumei/kyokusui.html’,”,’width=240,height=220′);return false;” shape=”rect” coords=”655,459,712,482″>
の部分は
<AREA href=”#” onMouseOver=”opgazou(‘https://kimassi.net/kenrokumei/kyokusui.html’,”,’width=240,height=220′);return false;” shape=”rect” coords=”655,459,712,482″ onmouseout=”clgazou();”>
にしました。
ところがウインドウを閉じますかのコメントが表示されて，閉じるのボタンを押すと地図のページが閉じてしまいました。こりゃあかん！
これでは都合が悪いので，onmouseoutを使うのはやめて，新しく開いたウインドウが一定時間たつと自動的に閉じるようにしました。これでウインドウを閉じる必要が無くなります。
kyokusui.htmlの
<BODY>を
<BODY onLoad=”setTimeout(‘window.close()’,10000)”>
に変えると１０秒後に自動的に閉じるようになりました。５秒後に閉じるようにするには
<BODY onLoad=”setTimeout(‘window.close()’,5000)”>
にすれば良いです。
どちらにしても，ポップアップブロッカーがオンになっていると表示されないので，何か良い方法がないか調べてみるとＪａｖａスクリプトを使わずにタグを利用してマウスを乗せたときに画像が表示してマウスを離した時に画像が消える方法があることを知りました。
http://netneko.jp/homepage/textgazou.html
を参考に，いろいろ試行錯誤して遂に思い通りのページにすることができました。ただ，偶然に思い通りの動作するようになったので，実際にどういう文法でどういう動作をしているのかは理解していません。
まずスタイルシートを利用して地図の重要でない部分に画像を表示するスペースを設けて基本になる画像を表示させます。今回は地図にマウスを乗せると画像が表示しますよという説明文の画像を表示するようにしました。下記のwidth : 240px;height : 220pxが画像を表示する大きさで，top : 800px;left : 670pxは画像を表示する位置でwindow.gif は最初に表示する基本になる画像です。img1 は特に意識しないでそのまま使えば良いと思います。
幅２４０高さ２２０の大きさの画像の中に名所の画像と名所の名前や説明文も一緒に入れてしまえば良いです。
下記の文を地図を表示した行の後ろの行に挿入しておきます。
<DIV style=”width : 240px;height : 220px;top : 800px;left : 670px;
position : absolute;
z-index : 1;
visibility : visible;
” id=”Layer1″><span id=”img1″><img src=window.gif></span></DIV>
地図の上に基本になる画像が表示したと思います。
地図上のリンクの部分を
<AREA href=”#” onmouseover=”img1.innerHTML='<img src=kyokusui.jpg>'” onmouseout=”img1.innerHTML='<img src=window.gif>'” shape=”rect” coords=”655,459,712,482″>
に変更すればＯＫです。
実際には兼六園の地図で利用したのですがサクサクとてきぱきと表示されるし，ポッポアップ禁止の設定にしてあっても表示できるし満足しています。
https://kimassi.net/kenrokumei/index.html
久しぶりに投稿にタグ（<や>入りのソースファイル）を挿入したらタグが文字扱いにならなくて当惑したのですが，ＨＴＭＬ扱いでなくビジュアルモードで投稿すれば良かったのでした。なんでもすぐに忘れてしまって困ります。