New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr7+

Bouncing image script

Description: This script adds any number of images to your document that move around, bouncing back and forth off the edges of the browser window. As mentioned, multiple images supported!

Note: Original Bouncing Image Script (single image, smaller in file size) is available here.

Demo: Hard to miss...

Directions

Step 1: Insert the below code into the HEAD section of your page:

<script language="JavaScript" src="dynlib.js"></script>
<script language="JavaScript" src="bouncingimages.js"></script>

As you can see, the code accesses two .js files. Download them here: dynlib.js and bouncingimages.js (right click, and select "Save As").

Step 2: Inside the <BODY> tag, add the following onLoad event handler:

<body onLoad="javascript:loadBouncingImages();">

Step 3: Download the following image file and upload it into your webpage directory (either by clicking it, or clicking it with the shift key depressed for NS users): Or, ignore this step if you wish to use your own image.

superball.gif (2240 bytes)

Configuring the script

All configurations to the script is done inside "bouncingimages.js". Open this file up using a text editor, and edit the top portion of the script.