Just playing with Scripts...
Recipie to move 3 baloons
Step 1
Download this "js" and put it on your webpage folder.
MoveObject.js acronimum for java script dhu!
Step 2
Download this "baloon picx" and put 'em on your webpage folder.
Step 3
Add this code between the <head> and the </head> tags
of your webpage source:
<!--copy start here-->
<script language="JavaScript" SRC="moveobj.js"> </script>
<script>
/*
Floating image script
By Virtual_Max (http://geocities.datacellar.net/siliconvalley/lakes/8620)
Permission granted to Dynamicdrive.com to feature it in it's archive
For 100's of FREE DHTML scripts and components,
Visit http://dynamicdrive.com
*/
var chip1;
var chip2;
var chip3;
//add or delete more variables, depending on how many images you're using
function pagestart()
{checkbrOK();
chip1=new Chip("chip1",60,80);
chip2=new Chip("chip2",60,80);
chip3=new Chip("chip3",60,80);
//add or delete more of the above, depending on how many images you're
using
if(brOK)
{ movechip("chip1");
movechip("chip2");
movechip("chip3");
//add or delete more of the above, depending on how many images you're
using
}
}
</script>
<!--copy end here-->
Step 4
Add this code to after the body tag of your webpage source:
<DIV ID="chip1" STYLE="position:absolute; width:47;
height:68;">
<A HREF="some.html"><IMG SRC="../ballon3.gif"
BORDER=0></a>
</DIV>
<DIV ID="chip2" STYLE="position:absolute; width:47;
height:68;">
<A HREF="some.html"><IMG SRC="../ballon4.gif"
BORDER=0></a>
</DIV>
<DIV ID="chip3" STYLE="position:absolute; width:47;
height:68;">
<A HREF="some.html"><IMG SRC="../ballon2.gif"
BORDER=0></a>
</DIV>
Step 5
Finally, add the following event handlers
inside the <body> tag itself, like this:
<body onLoad="pagestart();"
onUnload="if(brOK) {stopme('chip1'); stopme('chip2'); stopme('chip3');}" >
that's all folks! ...
-except if you want to configure the script
to handle more or other images..explenation ahead:
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 very simple. Each image is identified throughout the entire
script with the name "chipx". For example, the first image is called "chip1",
the second "chip2", and so on. Look in the code of Steps 2, 3, and 4 (yes,
all of them are involved). Here are the exact steps to modifying the script
so it animates any number of images:
1) Inside the code of Step3, add/delete
more "chipx" 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
tags to your page accordingly as well. Make sure the "ID" attribute
inside each of these
is defined with the unique chip name of the flying image (ie: chip1).
3) Finally, you need to make a small change to the code of Step 5. Let's
say I'm animating two images. The code after the change would be: onLoad="pagestart();"
onUnload="if(brOK) {stopme('chip1'); stopme('chip2');}" Notice how I
called the stopme() function two times, each with the ID of the two
images used as it's parameter. If I were animating four images, the
code would look like the following instead: onLoad="pagestart();" onUnload="if(brOK)
{stopme('chip1'); stopme('chip2');stopme('chip3');stopme('chip4');}"
That's all there is to it. The instructions may look long, but luckily,
it shouldn't take you long to figure out exactly how to configure this
great script to your liking!
Recommend Us!
Dounload Animated Mouse Gay Flag
<head>
<title>!!! Get Your Freak on !!!</title>
<base target="yourpage_blank">
<!----CUR---->
<style>
<!--
BODY{
cursor:url("bk.ani");
}
-->
</style>
</head>
