目玉（マウスの動きにあわせて目玉が動く）

説　　明
目玉がマウスにあわせて動きます。
注意事項
下記サンプルの赤字部分が目玉の画像、青字部分が目の枠になっています。それぞれの状況に応じて書き換えてください。

■動作雰囲気チェック　>>実行
サンプル
 <html>
<head>
<title>Eye</title>
<style type="text/css"><!--
.eye { position:absolute;top:100px;left:100px; }
--></style>
<script language="JavaScript"><!--
leftX = 100; //　左目中心Ｘ座標
leftY = 100; //　左目中心Ｙ座標
rightX= 200; //　右目中心Ｘ座標
rightY= 100; //　右目中心Ｙ座標
r = 30; //　半径
function eyeBall()
{
mx = event.x; //　マウスＸ座標
my = event.y; //　マウスＹ座標
rad = Math.atan2((mx-leftX),(leftY-my));
document.images["leftEye"].style.pixelLeft = leftX + Math.sin(rad) * r;
document.images["leftEye"].style.pixelTop = leftY - Math.cos(rad) * r;
rad = Math.atan2((mx-rightX),(rightY-my));
document.images["rightEye"].style.pixelLeft = rightX + Math.sin(rad) * r;
document.images["rightEye"].style.pixelTop = rightY - Math.cos(rad) * r;
}
// --></script>
</head>
<body onMousemove="eyeBall()">
<img src="eye.gif" class="eye" name="leftEye">
<img src="eye.gif" class="eye" name="rightEye">
<img src="waku.gif" class="eye" style="left:60px;top:60px;">
<img src="waku.gif" class="eye" style="left:160px;top:60px;">
</body>
</html>