Webmaster

Tips
All Tips ]

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.