| ポイント |
<![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"];
function openWin(wNo)
{
wURL = "sub"+wNo+".html"; // 表示するサブウィンドウのページURL
wTitle = "sub"+wNo; // ウィンドウタイトル（一意）
window.open(wURL,wTitle,winType[wNo]);
}
<map name="myMAP">
<area shape="rect" coords="30,20,60,50" href="sub1.html" onmouseover="openWin(0)">
<area shape="rect" coords="100,20,130,50" href="sub2.html" onmouseover="openWin(1)">
</map>
]]>
|
| 説 明 |
クリッカブルマップ上にマウスが乗ったら異なる位置にサブウィンドウを開くようにするにはareaタグにonmouseoverイベントでサブウィンドウを開く処理を記述します。この時に何番目のウィンドウを開くか指定します。サブウィンドウを開くために位置指定を個別に行わなければなりません。このサンプルでは、あらかじめ配列にパラメータを入れておき、何番目のウィンドウを開くか、その値をキーにして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"];
function openWin(wNo)
{
wURL = "sub"+wNo+".html"; // 表示するサブウィンドウのページURL
wTitle = "sub"+wNo; // ウィンドウタイトル（一意）
window.open(wURL,wTitle,winType[wNo]);
}
// --></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)">
<area shape="rect" coords="100,20,130,50" href="sub2.html" onmouseover="openWin(1)">
</map>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
クリッカブルマップ上にマウスが乗ったら異なる位置にサブウィンドウを開く