画像の座標位置取得
javascriptの勉強を始めたばかりで、どうしてもわからないことがあるので質問させてください。（まだ初めて一週間程度の初心者です…）
マウスの座標を取得するのはなんとなくわかったのですが、画像の座標をどうやって取得すればいいのかがわかりません。（マウスはevent.offsetで取得してるのでそれに合わせたい）
例えば…
function lyrGetTop(lyr){
return( parseInt( document.getElementById(lyr).style.pixelTop ) );
}
で、画面全体の位置からの座標を取得するのはできたのですが、ブロック内（？）の位置から取得することができません…。
どのようにすればevent.offsetでのマウスの座標ようにブロックを基準とした座標を取得することができますか？
それから、シューティングゲームの自機が弾を連射するようなアルゴリズムがわかりません。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
y = 450;
interval = 20;
function moveBall(){
y = y - interval;
document.getElementById("ball").style.pixelLeft = getlyrleft("ber") + 24;
document.getElementById("ball").style.pixelTop = y;
document.getElementById("ball").style.visibility = "visible";
if( (y < 10) ){
document.getElementById("ball").style.visibility = "hidden";
document.getElementById("ball").style.pixelTop = getlyrtop("ber");
return 0;
}
}
function getlyrtop(lyr){
return(parseInt(document.getElementById(lyr).style.pixelTop));
}
function getlyrleft(lyr){
return(parseInt(document.getElementById(lyr).style.pixelLeft));
}
// --></script>
</head>
<body onclick="setInterval('moveBall()',1)">
<img src="bb01.gif" id="ball" style="position:absolute; visibility:hidden" left:0px;top:16px;">
<img src="bb03.gif" id="ber" style="position:absolute; left:445px; top:459px;"/>
</body>
</html>
これだと、連射どころか、二回目のクリックに反応すらしないんです…。
どうかご教授お願いします。
