JAVASCRIPT EXAMPLES: Falling Pictures

Uncle Jim's Web Designs

Falling Pictures

This script dynamically introduces your images onto your page.
Each image will drop down from the top and stop directly in the center of the page.

INSTALLATION INSTRUCTIONS

COPY - Insert Between Head Tags: <HEAD></HEAD>

<SCRIPT LANGUAGE="JavaScript">
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
var loadImage;

function winWidth() {return ns ? innerWidth : d.body.clientWidth;}
function winHeight(){return ns ? innerHeight : d.body.clientHeight;}
function displayImage(){setTimeout("centerImage()", 40);}
function hideIt(){getLayer("picView").style.visibility = "hidden";}
function getLayer(id)
{
	var el = d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
	if(ns) el.style = el;
	return el
}
var thePic;
var TargetX;
var TargetY;
var currX, currY;
var theTimer = null;

function centerImage()
{
	var str='<A HREF="#" onMouseDown="hideIt();return false;"><img src="'+loadImage.src+'"></A>';
	thePic = getLayer("picView");
	if(document.layers)
	{
		thePic.document.write(str);
		thePic.document.close();
	}
	else
		thePic.innerHTML=str;

TargetX = (winWidth() -loadImage.width )/2;
	TargetY = (winHeight()-loadImage.height)/2;
	currX = TargetX;
	currY = -100 - loadImage.height;
	
	thePic.style.left = currX;
	thePic.style.top =  currY;
	if(theTimer == null)
		theTimer = setInterval("ani()", 40);

thePic.style.visibility = "visible";
}

function ani()
{
	TargetX = (winWidth() -loadImage.width )/2;
	TargetY = (winHeight()-loadImage.height)/2;
	thePic.style.left = currX;
	thePic.style.top =  currY;
	currY += (TargetY - currY)/8;
	currX += (TargetX - currX)/8;
}
function popImage(theUrl)
{
	getLayer("picView").style.visibility = "hidden";
	loadImage = new Image();
	loadImage.onload=displayImage;
	loadImage.src=theUrl;
	return false;
}
var theImages = new Array(
"http://www.jdstiles.com/java/images/effects4.gif",
"http://www.jdstiles.com/java/images/forms4.gif",
"http://www.jdstiles.com/java/images/navigation4.gif",
"http://www.jdstiles.com/java/images/utilities4.gif"
);
var theIndex = 0;
function slide()
{
	popImage(theImages[theIndex]);
	theIndex = (theIndex + 1) % theImages.length;
	setTimeout("slide()", 3000);
}
</SCRIPT>

COPY - Insert Inside Body: <BODY></BODY>

COPY - Insert into Body Tag: <BODY 'CODE HERE'>

Close This Window