Sami's Site: Extras and Fun Stuff
|
   |
Index · Multiple Floating images · Floating image - animated · Falling image - Leaves or Snow · Curled Corner Ad: Pageear
Multiple Floating images
This simple script allows you to put fun floating images over your web page. Could be balloons (original image), or anything that fits the season and the site. Perfect for balloons, ghosts for halloween, birds, anything that can drift all around the web page.
THESE IMAGES WILL FLOAT 360 degrees. If you want falling downward only, use a different script.
I have broken the script into pieces to better explain elements of it for better understanding.
On DD, the original script refers to images that were not being used. I adjusted the script to actually call for the balloon images shown in sample so it is less confusing.
There are 3 parts of the Dynamic Drive script.
We will combine 2 things together and place all of the code together. None of the code was placed into the HEAD of the this page.
1) DD's step 1 Capture the images and js file that controls the movement of the floating images.
Choose Save Target As and save the file on your computer.
Right click each balloon image to save each to your computer.
Or you can use your own images. If you use your OWN images, be sure to adjust the SIZE of the images in the code below to match.
2) DD's step 2 and 3 are combined in this step.
To capture the code, press Select All then COPY the contents.
Paste code into your page, near the top of your web page.
 Not using CSB or Trellix: REMOVE each ^gEMDIR/ from the script! Use FTP program to upload the js and balloon images to your website space.Using CSB or Trellix: use an INSERT HTML box to hold your script and put your js and images into web components .(webgem in Trellix). Then you MUST change each gEMDIR to GEMDIR before using code!  CODE NOTES:
^GEMDIR/ - Not using CSB/Trellix? Remove this and use FTP or file manager to upload image files to your webspace directly. Then enter the full path to the image.
^GEMDIR/ - Using CSB/Trellix? MUST have this in ALL CAPS for the code to work. CSB will upload the files to your webspace for you if you use this and put the images into webcomponents!
balloon2.gif - change each image name to match YOUR image names
http://dynamicdrive.com - change the URL address for each floating image. If your visitor clicks this, they will be taken to the other page. If you remove the link, clicking does nothing. Balloon4 code has the link removed for example.
,47,68- change the size of the images to match yours
You can add more images or use less images. Your choice.
The color changes, etc can effect functionality! Use the Select All above and modify!
<script type="text/javascript" src="^GEMDIR/moveobj.js"> </script>
<script type="text/javascript">
/***********************************************
* Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)
* Modified by Dynamic Drive for various improvements
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Using CSB or Trellix: use an INSERT HTML box to hold your script and put your js and images into web components (webgem in Trellix). Then you MUST change each gEMDIR to GEMDIR before using code!
***********************************************/
//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2, flyimage3
function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (47=width, height=68 of image):
flyimage1=new Chip("flyimage1",47,68);
flyimage2=new Chip("flyimage2",47,68);
flyimage3=new Chip("flyimage3",47,68);
//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");
}
if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
</script>
<!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above -->
<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="http://dynamicdrive.com"><IMG SRC="^GEMDIR/balloon2.gif" BORDER=0></a>
</DIV>
<DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="http://samisite.com"><IMG SRC="^GEMDIR/balloon3.gif" BORDER=0></a>
</DIV>
<DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF=""><IMG SRC="^GEMDIR/balloon4.gif" BORDER=0></a>
</DIV>
Add another DIV section for flyimage4, etc.
Or remove the DIV section for flyimage3 if you only want 2 images.
TWO IMPORTANT TIPS:
1) ALWAYS make sure your image names are exactly the same in the code and the name. No spaces or characters (other than _) and caps count! TN_image is not the same as tn_image. Recommend using only lowercase instead of caps.
2) Optimize your photos for fastest loading. Don't put an image on your site directly from your digital camera. It will take WAY too long to load!
|
