Image mobile rebondissante

Soyez le premier à donner votre avis sur cette source.

Vue 9 652 fois - Téléchargée 719 fois

Description

C'est une image mobile qui rebondit sur les bords de la fenêtre. Vous pouvez modifier la vitesse ligne 14. Il vous faut remplacer "mon_image.jpg" (ligne 7) par l'URL de l'image de votre choix. Les explications sont dans la source !

Source / Exemple :


<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>

Conclusion :


Aucun bug connu... Compatible avec tous les navigateurs !

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
103
Date d'inscription
jeudi 6 novembre 2008
Statut
Membre
Dernière intervention
9 juin 2010

Salut, je me suis ammuser à améliorer ta source bon c'est juste un petit truc lol en faite j'ai placé une bulle en image et j'ai mis des calculs pour que le curseur soit une main et qu'on peu pousser la bulle lol... Je l'ai mis sur mon site mais il est pas fini...
PS: sa ma mit quand même 5h pour trouver les bon calcul:
if(y<eval(ordonnee)+eval(183) && y>ordonnee && x>abcisse-1 && xordonnee && xabcisse+eval(183)-eval(20)){nx=-10;}
if(x<eval(abcisse)+eval(184) && x>abcisse && y>ordonnee-1 && y<ordonnee+eval(20)){ny=10;}
if(x<eval(abcisse)+eval(183) && x>abcisse && y<ordonnee+eval(184)+eval(1) && y>ordonnee+eval(184)-eval(20)){ny=-10;}
x et y sont les positions du curseur... Après faut comprendre mon système assez compliqué lol
Messages postés
1
Date d'inscription
samedi 7 février 2009
Statut
Membre
Dernière intervention
3 mars 2009

Code Impec par rapport à ce que j’ai vus et chercher sur le Web qui une fois inclus sur mon site rallonger la page sans fin,
Marche très bien avec IE
Seul bémol pour celui ci une fois mis je n’est plus de music en fond de page la ou y a Image rebondissant et donc le code et seulement sur cette page !
Est-ce que vous savais pourquoi ?

Dans tous les cas Merci
Messages postés
14
Date d'inscription
mercredi 24 septembre 2003
Statut
Membre
Dernière intervention
18 avril 2006

Bon boulot, valide sous Opera 8.5.
N'ai pas de quoi tester sou IE, mais ma copine me dira ça.

8/10 (pour une raison que j'ignore je peux pas voter)
Messages postés
35
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 mai 2006

Bonjour à tous !

Mon code est maintenant compatible avec Internet Explorer ! C'est bizarre : j'ai l'impression que IE ne supporte pas cetaines fonctionnalités du DOM, contrairement à Mozilla Firefox, je me demande pourquoi... Bon @+ !
Messages postés
868
Date d'inscription
dimanche 26 décembre 2004
Statut
Membre
Dernière intervention
26 février 2008
1
Oui, sur Internet Explorer, rien ne bouge...
@++
Afficher les 6 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.