Free-Javascripts.com - Dancing Gifs

> Home > Graphics > Dancing Gifs
Dancing Gifs

In a Nutshell: Allow your images to dance freely across the screen with this free Javascript. Still and animated gifs alike can now enjoy freedom from the tyranny of design and static placement.

Use it Yourself: Copy the code from below and paste it within the <head> section of your HTML code. This is the portion that drives the movement, and can be modified without too much trouble.
<script language=javaScript>    function setVariables(){ if (navigator.appName == "Netscape") { horz=".left"; vert=".top"; docStyle="document."; styleDoc=""; innerW="window.innerWidth"; innerH="window.innerHeight"; offsetX="window.pageXOffset"; offsetY="window.pageYOffset"; objectXY="layers[0]"; }else{ horz=".pixelLeft"; vert=".pixelTop"; docStyle=""; styleDoc=".style"; innerW="document.body.clientWidth" innerH="document.body.clientHeight" offsetX="document.body.scrollLeft" offsetY="document.body.scrollTop" objectXY="object1" } } function checkLocation(){ imgwidth=79; // logo width, in pixels imgheight=70; // logo height, in pixels var availableX=eval(innerW) var availableY=eval(innerH) var currentX=eval(offsetX) var currentY=eval(offsetY) xmax=availableX-(imgwidth+20)+currentX ymax=availableY-(imgheight+20)+currentY } var x=-100; var y=50; var a=5; var b=5; function startMoveR(){ checkLocation(); x += a; y += b; if (y>ymax) b=b*-1 if (y<10) b=b*-1 evalMove(); if (x<xmax+20) setTimeout("startMoveR()",100); else setTimeout("startMoveL()",100); } function startMoveL(){ checkLocation() x -= a; y += b; if (y>ymax-15) b=b*-1 if (y<10) b=b*-1 evalMove(); if (x>0) setTimeout("startMoveL()",100); else setTimeout("startMoveR()",100); } //****************************** function evalMove(){ eval(docStyle + objectXY + styleDoc + horz + "=" + x); eval(docStyle + objectXY + styleDoc + vert + "=" + y); //setTimeout("checkLocation()",10) //****************************** } </script>
Next, the following Javascript component must be placed within the <body> section of your HTML code. The onload commands must be added to your <body> tag.
<BODY onload="setVariables(),startMoveR()" bgcolor=#004080> <div id="object1" style="position:absolute; visibility:show; left:-100px; top:50px; z-index:2"> <table><td><IMG SRC="../midi/ladyred/dancing.gif" WIDTH="62" HEIGHT="68"></td></table></div>

This Script Created By: Randy Bennett
HOME | Newest | Most Popular | Tutorials | Submit a Script |

Copyright © 1999-2007 iOnline Pty Ltd. All rights by all media reserved. All elements on this site, including page design, contents and graphics (with the obvious exception of the free Javascripts) may not be reproduced, broadcast, rewritten or redistributed in whole or in part without tthe expressed written permission of iOnline Pty Ltd.