gotFusion.com....... Where your adventure begins
Full Service Web HostingNetObjects Fusion 7 Websites Portal

 


 

You can make a small graphic move randomly around your pge.

Click here for an example.

1. The moving image (.gif)

First, make the gif (yourimage.gif) you want to move around the screen. It should be pretty small - mine is 32 x 28. Once you've made it, get its exact size. You'll need the size to put in the script that follows. (The one I've made here is just a plain old ordinary gif processed in Paintshop Pro with a white background and with white specified as transparent.)

In Assets View, add yourimage.gif as a New File Asset. Mark it to Always Publish;

In Publish View, if it's not there already, drag it to the same directory as the file that is to display the moving object.

2. The .js file

Most of the work is done by a .js file you include in the same directory as the page that is to display the moving object. To do this:

  • Download the file called movingobject.exe;
  • Save it to your Desktop (or wherever you routinely save downloaded files);
  • Double click it to extract a .js file called moveobj.js and a readme;
  • Move the moveobj.js file to your Assets folder;
  • In Assets View, add the file called moveobj.js to your database as a New File Asset. Mark it to Always Publish;
  • In Publish View, if it's not there already, drag it to the same directory as the file that is to display the moving object.
3. The Head

Put this in the Between Head Tags area:

<!-- Moving object script -->
<!-- Script by Virtual_Max -->
<!-- http://www.geocities.com/siliconvalley/lakes/8620 -->

<SCRIPT language="JavaScript" SRC="moveobj.js">
</SCRIPT>

<SCRIPT>
var chipID;
function pagestart()
{
checkbrOK();
chipID=new Chip("chipID",32,28);
if(brOK)
{
movechip("chipID");
}
}
</SCRIPT>

But...
Change the the size. If your graphic is a bit different to my 32x28, then change the 32 and the 28 to the dimensions of your graphic.


4. The Body

Put this in the Beginning of Body:

<!----Moving object begining---->
<DIV ID="chipID" STYLE="position:absolute; width:32; height:28;">
<A HREF="index2.html"><IMG SRC="yourimage.gif" BORDER=0></a>
</DIV>
<!----Moving object end---->

Two things to change here: The size of your particular graphic and the name of your graphic eg I changed yourimage.gif to: nofstar.gif (which is what I'd called the gif I was planning to display - see Step 1 above). And I changed the size to: width:32; height:28 which were the dimensions of the  image you see drifting around here somewhere.


5. Inside Body

Put this in the Inside Body Tag area:

onLoad='pagestart();' onUnload='if(brOK){stopme("chipID");}'

 

That's all. Good luck!

Return to the TOP of this page


|  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  | 

Problems with this page?  

All content copyright © 2002 gotFusion LLC.  The name gotFusion and the gotFusion ® logo are registered trademarks of gotFusion LLC
Copyright, legal notice & privacy statement