New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

NS6+ IE5+ Opera 7+

:: Bouncing image script (single image version)

Description: Through absolute positioning, along with clever math calculations, Hass (a Dynamicdrive.com surfer) has created this great bouncing image script. It charges aimlessly through the page, hitting and refracting off the edges of your browser window. It does so even if the user scrolls the page (unlike a fault seen in many similar scripts out there). Spectacular...

Demo: Hard to miss...


Directions: Developer's View

Step 1: 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)

Step 2: Add the following into the <head> section of your page:

Select All

Step 3: Last by not least, copy the following into the <body> section of your page, outside any other tags. This contains the actual HTML codes used to display the bouncing image:

Select All

Bounce away!

Configuring the script

The image to be bounced can be changed to your own. To do so, you'll need to edit not only the image src attribute inside Step 3, but also, four variables located at the top of the code in Step 2. One of the four variables also controls how long the ball remains visible on the screen.