An image that crosses the screen
Watch out, a flying saucer could travel across your screen! To produce such an effect, all you need is some scripting code:
Place the following script in any page you want between the
<head> and
</head> tags:
<script>
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if(ns4){
anim = document.broom;
}
else
if (ie4) {
anim = broom.style;
}
animateit()
}
function animateit() {
if(ns4||ie4){
anim.left = parseInt(anim.left)-5;
if (parseInt(anim.left) <-188)
{ anim.left =800 }
setTimeout("animateit()",100);
}
}
// -->
</script>
Now add the following code snippet to your page body in order to draw the layer that will contain the image:
<div id="broom" style="position:absolute; top:140; left:800; width:188">
<IMG src="your_image.jpg"></div>
Next, use the following instructions to run the script as soon as the page is loaded:
<body onload="init();">
Before using the code, you have to adapt it:
- Replace your_image.jpg by the name of your image file (with the path to it, if necessary)

- Adjust the layer size to that of your image (width: 188).

- You should also adjust the width in the animation script (if (parseInt(anim.left) <- 188)).

- Set the position in your page (in pixels) at which you want the image to cross the browser window (top: 140).

Discover all Webmaster tips.