- <html>
- <head>
- <title>une image qui rebondit !</title>
- </head>
- <body onLoad="bang()"><!--déclenchement de la fonction au chargement de la page-->
- <div id="bing" style="position:absolute;">
- <img src="mon_image.jpg" alt="bing" /><!--remplacer "mon_image.jpg" par l'URL de l'image de votre choix-->
- </div>
- <script type="text/javascript">
- abcisse = 0;//abcisse du coin supérieur gauche de l'image
- ordonnee = 0;//ordonnee du coin supérieur gauche de l'image
- nx = 1;//changement de l'abcisse
- ny = 1;//changement de l'ordonnee
- vitesse = 15;//vitesse du mouvement : vous pouvez changer cette valeur
- function bang() {
- document.getElementById("bing").style.left = abcisse;//positionnement horizontal de l'image
- document.getElementById("bing").style.top = ordonnee;//positionnement vertical de l'image
- largeur = (navigator.appName != "Microsoft Internet Explorer")? window.innerWidth : document.body.offsetWidth;//la variable largeur a pour valeur la largeur de la fenêtre
- hauteur = (navigator.appName != "Microsoft Internet Explorer")? window.innerHeight : document.body.offsetHeight;//la variable hauteur a pour valeur la hauteur de la fenêtre
- bas = (navigator.appName != "Microsoft Internet Explorer")? document.getElementById('bing').clientHeight : document.getElementById('bing').offsetHeight;//la variable bas contient la hauteur de l'image
- droite = (navigator.appName != "Microsoft Internet Explorer")? document.getElementById('bing').clientWidth : document.getElementById('bing').offsetWidth;//la variable droite contient la largeur de l'image
- //début du code essentiel
- if ((ordonnee + bas) >= hauteur) ny = -1;
- if ((abcisse + droite) >= largeur) nx = -1;
- if (ordonnee <= 0) ny = 1;
- if (abcisse <= 0) nx = 1;
- abcisse += nx;
- ordonnee += ny;
- //fin
- setTimeout('bang()',vitesse);//la fonction se rappelle d'elle-même par un temps en millisecondes défini par la variable vitesse
- }
- </script>
- </body>
-
- </html>
<html>
<head>
<title>une image qui rebondit !</title>
</head>
<body onLoad="bang()"><!--déclenchement de la fonction au chargement de la page-->
<div id="bing" style="position:absolute;">
<img src="mon_image.jpg" alt="bing" /><!--remplacer "mon_image.jpg" par l'URL de l'image de votre choix-->
</div>
<script type="text/javascript">
abcisse = 0;//abcisse du coin supérieur gauche de l'image
ordonnee = 0;//ordonnee du coin supérieur gauche de l'image
nx = 1;//changement de l'abcisse
ny = 1;//changement de l'ordonnee
vitesse = 15;//vitesse du mouvement : vous pouvez changer cette valeur
function bang() {
document.getElementById("bing").style.left = abcisse;//positionnement horizontal de l'image
document.getElementById("bing").style.top = ordonnee;//positionnement vertical de l'image
largeur = (navigator.appName != "Microsoft Internet Explorer")? window.innerWidth : document.body.offsetWidth;//la variable largeur a pour valeur la largeur de la fenêtre
hauteur = (navigator.appName != "Microsoft Internet Explorer")? window.innerHeight : document.body.offsetHeight;//la variable hauteur a pour valeur la hauteur de la fenêtre
bas = (navigator.appName != "Microsoft Internet Explorer")? document.getElementById('bing').clientHeight : document.getElementById('bing').offsetHeight;//la variable bas contient la hauteur de l'image
droite = (navigator.appName != "Microsoft Internet Explorer")? document.getElementById('bing').clientWidth : document.getElementById('bing').offsetWidth;//la variable droite contient la largeur de l'image
//début du code essentiel
if ((ordonnee + bas) >= hauteur) ny = -1;
if ((abcisse + droite) >= largeur) nx = -1;
if (ordonnee <= 0) ny = 1;
if (abcisse <= 0) nx = 1;
abcisse += nx;
ordonnee += ny;
//fin
setTimeout('bang()',vitesse);//la fonction se rappelle d'elle-même par un temps en millisecondes défini par la variable vitesse
}
</script>
</body>
</html>