| ポイント |
<![CDATA[
winType = ["left=10,top=50,screenx=10,screeny=50,width=320,height=240",
"left=120,top=200,screenx=120,screeny=200,width=320,height=240",
"left=300,top=10,screenx=300,screeny=10,width=320,height=240"];
winObj = new Array();
function openWin(wNo)
{
wURL = "sub"+wNo+".html"; // 表示するサブウィンドウのページURL
wTitle = "sub"+wNo; // ウィンドウタイトル（一意）
winObj[wNo] = window.open(wURL,wTitle,winType[wNo]);
winObj[wNo].blur();
}
function closeWin(wNo)
{
winObj[wNo].close();
}
<area shape="rect" coords="30,20,60,50" href="sub1.html" onmouseover="openWin(0)" onmouseout="closeWin(0)">
<area shape="rect" coords="100,20,130,50" href="sub2.html" onmouseover="openWin(1)" onmouseout="closeWin(1)">
<area shape="rect" coords="170,20,200,50" href="sub3.html" onmouseover="openWin(2)" onmouseout="closeWin(2)">
]]>
|
| 説 明 |
クリッカブルマップ上にマウスが乗ったら異なる位置にサブウィンドウを開き、離れたら閉じるようにするにはareaタグにonmouseoverイベントでサブウィンドウを開く処理を記述、onmouseoutでサブウィンドウを閉じる処理を記述します。この時に何番目のウィンドウを開くか指定します。サブウィンドウを開くために位置指定を個別に行わなければなりません。このサンプルでは、あらかじめ配列にパラメータを入れておき、何番目のウィンドウを開くか、その値をキーにしてwindow.open()で指定を行っています。この時にサブウィンドウオブジェクトへの参照を配列に入れておく事でサブウィンドウを閉じる時の処理を簡潔に記述できるようにしています。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>クリッカブルマップ上にマウスが乗ったら異なる位置にサブウィンドウを開き、離れたら閉じる</title>
<script Language="JavaScript"><!--
winType = ["left=10,top=50,screenx=10,screeny=50,width=320,height=240",
"left=120,top=200,screenx=120,screeny=200,width=320,height=240",
"left=300,top=10,screenx=300,screeny=10,width=320,height=240"];
winObj = new Array();
function openWin(wNo)
{
wURL = "sub"+wNo+".html"; // 表示するサブウィンドウのページURL
wTitle = "sub"+wNo; // ウィンドウタイトル（一意）
winObj[wNo] = window.open(wURL,wTitle,winType[wNo]);
winObj[wNo].blur();
}
function closeWin(wNo)
{
winObj[wNo].close();
}
// --></script>
</head>
<body>
クリッカブルマップ上にマウスが乗ったらサブウィンドウを開き、離れたら閉じる<br>
<img src="map.gif" usemap="#myMAP">
<map name="myMAP">
<area shape="rect" coords="30,20,60,50" href="sub1.html" onmouseover="openWin(0)" onmouseout="closeWin(0)">
<area shape="rect" coords="100,20,130,50" href="sub2.html" onmouseover="openWin(1)" onmouseout="closeWin(1)">
<area shape="rect" coords="170,20,200,50" href="sub3.html" onmouseover="openWin(2)" onmouseout="closeWin(2)">
</map>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
クリッカブルマップ上にマウスが乗ったら異なる位置にサブウィンドウを開き、離れたら閉じる