You sure go the extra mile to help a guy out! Thanks!
Unfortunately, I the only one I could get to work was the second one, and it doesn't solve my problem of having to write in an <img /> with a unique id for each flake (or at least I don't think it does...).
That is why I was interested in extending the Image object. That way, every dotFlake object would have an image associated with it as the parent is the Image object - no need to get and image by ID.
I think you tried to do this in the first one, but followed caught the train of thought I had originally, the one that led me to the discovery of the <img /> limitation.
Code:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="template.php_files/style.html">
<title>EchoLynx.com</title>
<script type="text/javascript">
var x = 100;
var y = 0;
var timer;
function startSnow(){
if (document.body.clientHeight<y){ //Thanks! http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
clearTimeout(timer);
document.getElementById("basicFlake").visible = "collapse";
} else {
timer = setTimeout("startSnow()",1);
}
document.getElementById("basicFlake").style.position="absolute";
document.getElementById("basicFlake").style.top = y;
document.getElementById("basicFlake").style.left = x;
y++; // Falling is constant.
if (Math.random() >.5){ // Random direction, though.
x++;
} else{
x--;
}
}
function stopSnow(){
document.getElementById("basicFlake").style.visible="hidden";
}
</script>
</head>
<body onload="startSnow()">
<h1>This is test text.</h1>
<a href="stopSnow()">Stop Snow</a>
<img id="basicFlake" src="./simpleDotFlake.png" width="10" height="10" />
</body>
</html>