Lissa Explains it All -- HTML Help and Tutorial for Kids

How do I make floating images? How do I make trailing images?

How do I make floating images? (IE only) This is a really fun script that was written by Peter Gehrig at my request ;) It is included here with his permission. Each image can be linked to a different Web site, you can disable this option by adding a # sign instead of a link in the code.

Add this tag immediately after your </head> tag and before the <body> tag (you can add or subtract images):

// CREDITS:
// FlyingPictures by Urs Dudli and Peter Gehrig 
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com
// info@24fun.ch
// 8/30/2000

//Provided free at http://www.lissaexplains.com (with permission)

// URLs of floating images. Add as many images as you like.
// ATTENTION: Too many images will slow down the floating effect)
var your_image=new Array()
your_image[0]="yourimage.gif"
your_image[1]="yourimage.gif"
your_image[2]="yourimage.gif"
your_image[3]="yourimage.gif"
your_image[4]="yourimage.gif"

// You may add links for each image separately.
// In case you do not want to link a picture just add a '#' instead of an URL (see sample below)
var your_image_link=new Array()
your_image_link[0]="http://www.yourlink.com"
your_image_link[1]="http://www.yourlink.com"
your_image_link[2]="http://www.yourlink.com"
your_image_link[3]="#"
your_image_link[4]="http://www.yourlink.com"

// average speed of the floating images. Higher means faster. Change ONLY the number below.
var floatingspeed=5

// do not edit the variables below
var tempo=20
var numberofimages=your_image.length-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofimages;i++) {
	stepx[i]=randommaker(floatingspeed)
	stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
for (i=0;i<=numberofimages;i++) {
	imgwidth[i]=10
	imgheight[i]=10
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
var spancontent=new Array()
var imgpreload=new Array()
for (i=0;i<=your_image.length;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=your_image[i]
}

for (i=0;i<=numberofimages;i++) {
	spancontent[i]="<a href='"+your_image_link[i]+"'><img src='"+your_image[i]+"' border='0'></a>"
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	if (document.all) {
		checkposition()
		movepictures()
    	timer=setTimeout("checkmovement()",tempo)
	}
	if (document.layers) {
		checkposition()
   		movepictures()
    	timer=setTimeout("checkmovement()",tempo)
	}
}

function checkposition() {
	if (document.all) {
		for (i=0;i<=numberofimages;i++) {             
			var thisspan=eval("document.all.span"+i+".style")
			if (thisspan.posLeft>marginright-imgwidth[i]) {
				thisspan.posLeft-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.posLeft<marginleft) {
				thisspan.posLeft+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.posTop>marginbottom-imgheight[i]) {
				thisspan.posTop-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.posTop<margintop) {
				thisspan.posTop+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
	if (document.layers) {
		for (i=0;i<=numberofimages;i++) {             
			var thisspan=eval("document.span"+i)
			if (thisspan.left>marginright-imgwidth[i]) {
				thisspan.left-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.left<marginleft) {
				thisspan.left+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.top>marginbottom-imgheight[i]) {
				thisspan.top-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.top<margintop) {
				thisspan.top+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
}

// - End of JavaScript - -->
</script>

Use this tag in place of your own body tag, you can change the background color:

<body id="thisbody" bgcolor="#ffffff" onLoad="setValues()" style="width:100%;overflow-x:hidden;overflow-y:hidden">

Then put this code immediately after the above body tag:

How do I make trailing images? (IE only) This is another awesome script by Peter Gehrig. An image bounces around your site, leaving a trail.

Add this tag immediately after your </head> tag and before the <body> tag (you can add or subtract images):

// CREDITS:
// PicturePong by Urs Dudli and Peter Gehrig 
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com.
// info@24fun.ch
// 8/6/2000

//Offered free at http://www.lissaexplains.com (with permission)

// CONFIGURATION:
// Go to http://www.24fun.com, open category 'animation' and 
// download the ZIP-file of this script containing
// the script-file with step-by-step instructions for easy configuration.

// URL of your image. Attention: big images will slow down the script!
var your_image="abstar6.gif"

// speed
var tempo=40

// average horizontal distance between the images
var stepx=20

// average vertical distance between the images
var stepy=20

// number of images
var numberofimages=12

// do not edit the variables below
var imgpreload=new Image()
imgpreload.src=your_image
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
var xpos=new Array()
var ypos=new Array()
var spancontent=new Array()

for (i=0; i<=numberofimages;i++) {
    xpos[i]=0
	ypos[i]=0
}

for (i=0;i<=numberofimages;i++) {
	spancontent[i]="<img src='"+your_image+"'>"
}

function setValues() {
    var firsttimer= setTimeout("setValues2()",2000)
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
    return rand
}

function moveball() {
	if (document.all) {
		checkposition()
   		makesnake()
   		document.all.span0.style.posTop+=stepy
    	timer=setTimeout("moveball()",tempo)
	}
	if (document.layers) {
		checkposition()
   		makesnake()
   		document.span0.top+=stepy
    	timer=setTimeout("moveball()",tempo)
	}
}

function checkposition() {
	if (document.all) {
		if (document.all.span0.style.posLeft>marginright) {
			stepx=(stepx+randommaker(2))*-1
			document.all.span0.style.posLeft-=1
		}
		if (document.all.span0.style.posLeft<marginleft) {
			stepx=(stepx+randommaker(2))*-1
			document.all.span0.style.posLeft+=1
		}	
		if (document.all.span0.style.posTop>marginbottom) {
			stepy=(stepy+randommaker(2))*-1
			document.all.span0.style.posTop-=1
		}
		if (document.all.span0.style.posTop<margintop) {
			stepy=(stepy+randommaker(2))*-1
			document.all.span0.style.posTop+=1
		}
	}
	if (document.layers) {
		if (document.span0.left<=marginright) {
			stepx=(stepx+randommaker(2))*-1
			document.span0.left-=10
		}
		if (document.span0.left<=marginleft) {
			stepx=(stepx+randommaker(2))*-1
			document.span0.left+=10
		}	
		if (document.span0.top<=marginbottom) {
			stepy=(stepy+randommaker(2))*-1
			document.span0.top-=10
		}
		if (document.span0.top<=margintop) {
			stepy=(stepy+randommaker(2))*-1
			document.span0.top+=10
		}
	}
}

// - End of JavaScript - -->
</script>

This Web site is registered with the Library of Congress Copyright Office.