Une image qui rebondie

DEMONSTRATION

Vous pouvez en faire une lien. Il fonctionne sur Netscape et Internet Explorer MAIS sous l'explorer il déconne un peu. (En réalité c'est plutot l'explorer qui déconne !!)

Code source entre <BODY> et </BODY>
top

<div id="object1" style="position:absolute; visibility:show; left:-100px; top:50px; z-index:2">
<!--votre image ci-dessous, vous pouvez en faire un lien html-->
<IMG SRC="COEUR.GIF" BORDER=0 WIDTH=100 HEIGHT=85></div>
<script language=javaScript>
<!--
//Merci de ne pas effacer ces lignes
//D'autres script,applet,images sur webgraf.Com 
//Mathieu Gros, webmaster@webgraf.Com
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;  
imgheight=70;  


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=-20;  //début de l'animation a gauche de la page  0 = bord de la page
            //                                        - x = a gauche du bord
            //                                        + x = a droite du bord
			//Internet explorer à décidemment du mal avec cette variable....
var y=5;   //début de l'animation en haut de la page  
            //50 = commence a 50 en dessous du haut de la page
var a=5;   //vitesse en X
var b=5;   //vitesse en Y

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)
//******************************
}
setVariables()
startMoveR()
//-->
</script>
 
INFORMATIONS COMPLEMENTAIRES
top

ATTENTION Comment intégrer ce script dans votre page: Vous pouvez télécharger cette page ( avec l'image) au format zip :télécharger.








Un problème ou une critique : e-mail
Des ressources utiles et gratuites pour vos pages Web :
webgraf.com