Floating Images


Example: See the background of this page

OK, this has several steps. First, you need the images. They can be different sizes, and you should decide which one you want in front of the other.

Second, you'll need to upload the following file
moveobj.js
This is a javascript file that is located outside the html page. To view what this script looks like, click here. Upload this file into the folder where you keep your html files.

Third, you'll need to put the following code in the head of your document. Make sure you adjust the width and height sizes of your images:

<script type="text/javascript" src="moveobj.js"> </script>
<script type="text/javascript">
/***********************************************
* Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)
* Modified by Dynamic Drive for various improvements
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (63=width, height=83 of image):
 flyimage1=new Chip("flyimage1",63,83);
 flyimage2=new Chip("flyimage2",63,83);



//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyimage1");
movechip("flyimage2");


}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

</script>


Finally, you need to put the following divisions into the body of your document. You can chose whether the images are links or not. Hmmm... you could make them all different links if you'd like!

<DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:63; height:83; z-index:-1">
<A HREF="linkpage.html"><IMG SRC="coolimage1.gif" name="one" BORDER=0></a>
</DIV>

<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:63; height:83; z-index:-2">
<A HREF="linkpage.html"><IMG SRC="coolimage2.gif" name="two" BORDER=0></a>
</DIV>