| ポイント |
<![CDATA[
if (document.all)
{
x1 = event.x;
y1 = event.y;
}else{
x1 = evt.pageX;
y1 = evt.pageY;
}
if ((x1 <= w) && (y1 <= h)) location.href = "http://www.openspc2.org/";
]]>
|
| 説 明 |
画像の一部分がクリックされたかどうかはイベントオブジェクトでの座標値を調べます。マウスの座標そのもの、オブジェクト内での座標値などを取得して処理します。このサンプルではページ上のマウス座標を取得し、その座標を元にして処理を行っています。ページ上の座標になるため画像は絶対座標系で定位置に固定されていないと正しく処理できません。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>画像の一部分がクリックされたら別ページに移動する(1)</title>
<script language="JavaScript"><!--
var evt;
function rectCheck()
{
if (document.all)
{
x1 = event.x;
y1 = event.y;
}else{
x1 = evt.pageX;
y1 = evt.pageY;
}
alert(x1+","+y1);
w = 128; // 赤い部分の横幅
h = 64; // 赤い部分の縦幅
if ((x1 <= w) && (y1 <= h)) location.href = "http://www.openspc2.org/";
}
function getMouseXY(e){ evt = e;}
document.onmousedown = getMouseXY;
// --></script>
</head>
<body>
<img src="rect.gif" onClick="rectCheck()" style="position:absolute;left:0px;top:0px;">
<br><br><br><br><br><br><br>
画像の一部分がクリックされたら別ページに移動します<br>
</body>
</html>
]]>
|
| 補足説明 |
iCab、Safari、Opera 7以降でも動作します。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
画像の一部分がクリックされたら別ページに移動する(1)