Floating images script All
Description: One important feature of DHTML is it's ability to move elements around the page freely, without having to be tied down to one single spot on the page. "Virtual Max" took full advantage of this feature and created his cool "floating images" script for our Dynamic Drive surfers to use and enjoy. It's a cross-browser script that moves any number of images around the page (by wrapping the images inside <div>s, and animating each <div>), each following a randomly determined path. Furthermore, the images are clickable, making this script not only insanely cool, but practical as well!
Demo: Look around you...
Step 1: Download the following .js file and upload it into your webpage directory (either by clicking it, or clicking it with the shift key depressed for NS users):
Step 2: Add the following into the <head> section of your page:
Step 3: Add the following into the <body> section of your page, outside any other tags. This contains the actual HTML codes used to display the images themselves:
You now essentially have the script installed and ready to run. Read on to see how to configure it to your liking.
Configuring the script
As mentioned in the description, this script can animate an unlimited number of images. The instructions above creates a situation where three images are animated (like in the demo). Obviously, you'll want to know how to configure it to handle any number of images. The process to this is simple but rather long. Each image is identified throughout the entire script with the name "flyimagex". For example, the first image is called "flyimage1", the second "flyimage2", and so on. Look in the code of Steps 2 and 3. Here are the exact steps to modifying the script so it animates any number of images:
1) Inside the code of Step 2, add/delete more "flyimagex" variables to it as specified in the documentation, depending on the number of images you're using.
2) Inside the code of Step 3, add/delete more of the <div> tags to your page accordingly as well. Make sure the "ID" attribute inside each of these <div> is defined with the unique variable name of the flying image (ie: flyimage1).