Dynamic Drive DHTML Scripts- Floating images script

Dynamicdrive.com

New

Revised

Hot

FAQ

Submit

M Zone

.	Menu
	Search DD Recommend DD Help Forums New DHTML books Advertising Contact
	Featured Script Rollover buttons Turn regular form buttons into rollover menus with this script! .
	Partners
	Free JavaScripts .
	Link to DD
	Do you use scripts from Dynamic Drive? Please give something back by linking to us... .

Home Image Effects Here

Floating images script All

Credits:
Name: Virtual Max
Homepage: Virtual Max Homepage
Note: Updated October 7th, 04 for NS6/Opera 7, doctype compatibility.

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...

Directions:

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

moveobj.js

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).

Recommend Us!
-If you like Dynamic Drive, please recommend us to a friend...

Legend
All- Script works with Netscape 4 AND Internet Explorer 4+
NS- Indicates script works with Netscape 4 (NOT NS 6 yet)
IE- Indicates script works with Internet Explorer 4 and above
NS6!- Temporary index set up on script category pages to indicate script works in NS6

Copyright � 1998-2004 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.
Partners: JavaScript Tutorials | JavaScript Reference