javascriptで画像を動かす

！DOCTYPE　htmlとするとjavascriptが動作しない。この記述HTML5では、”ｐｘ”を付けないと正常にならないとのこと。
setTimeout関数はこう使うのかと目からうろこだな。リカーシブコールになってるけど問題ないのか・・・。ちょっと分からないな。

javascript<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像移動</title>
<script >
x1 = 10;
y1 = 10;
x2 = 80*2;
y2 = 100*2;
step = 1;
dx = x2 - x1;
dy = y2 - y1;
if (dx > dy) a = dy / dx; else a = dx / dy;
x = x1;
y = y1;
function moveImg()
{
    flag = true;
    if (dx > dy)
    {
        x = x + step;
        y = a * x;
        if (x > x2) flag = false;
    }else{
        y = y + step;
        x = a * y;
        if (y > y2) flag = false;
    }
    //--注） <!DOCTYPE html>の宣言の場合 "px"をくっ付けないと動作しないように見える。
    document.myIMG.style.left = x + "px";
    document.myIMG.style.top  = y + "px";
    if (flag) setTimeout("moveImg()",50);
}
</script>
</head>
<body topmargin="0" leftmargin="0" backgroung-color:"black">
<a href="javaScript:moveImg()">移動</a>
 
<img src="moon.png" name="myIMG" style="position:absolute;top:20px;left:10px;"><br>
<img src="moontrans.png" style="position:absolute;top:100px;left:80px;"><br>
<br><br><br><br>
</body>
</html>

No tags for this post.