CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 06 01:41:15

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 966 membres
20 nouveaux aujourd'hui
15 046 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 045 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

IMAGE MOBILE REBONDISSANTE

Information sur la source

Catégorie :Graphique Niveau : Initié Date de création : 25/06/2005 Date de mise à jour : 13/07/2005 14:37:48 Vu / téléchargé: 5 992 / 537

Auteur : peter1789

Site perso

Ecrire un message privé

Note :

8,33 / 10

Commentaire sur cette source (5)

Ajouter un commentaire et/ou une note

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

<html>
<head>
<title>une image qui rebondit !</title>
</head>
<body onLoad="bang()">
<div id="bing" style="position:absolute;">
<img src="mon_image.jpg" alt="bing" />
</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>

Conclusion

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

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

image_rebondissante.html 1 932 octets

Télécharger le zip

Historique

26 juin 2005 21:50:48 :: Maintenant compatible avec Internet Explorer !
04 juillet 2005 12:44:13 :: correction d'une erreur !
11 juillet 2005 11:24:24 :: correction d'une erreur !
13 juillet 2005 14:36:21 :: ajout d'un zip
13 juillet 2005 14:37:48 :: correction du zip

Sources du même auteur

LISTAGE DES OBJETS, MÉTHODES ET PROPRIÉTÉS

CHERCHOBJET

EXTRACTION DES PARAMÈTRES D'UNE URL

ANIMATION DYNAMIQUE DE BIENVENUE

CALCUL DU VOLUME DES SOLIDES DE PLATON

Toutes les sources de peter1789

Sources de la même categorie

GALLERY_PICTURE par midokok

POSITION, OFFSETLEFT, CLIENTLEFT CROSSBROWSER par Kimjoa

ALBUM PHOTO AVEC PARTIE ADMINISTRATION - PHP + AJAX + XML par tinokoxx

INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info

LIGHTBOX SANS ONCLICK ET AVEC REDIMENSIONNEMENT par zoby44

Toutes les sources de la catégorie Graphique

Commentaires et avis

Commentaire de ThunderPsycho le 26/06/2005 11:06:25

Ton script fonctionne très bien sur Firefox, mais je n'ai pas réussi à l'utiliser sur Internet Explorer, pour une fois, ça change ;o))
Sinon c'est marrant mais sans grand intérêt...

Commentaire de algori le 26/06/2005 11:10:43

Oui, sur Internet Explorer, rien ne bouge...
@++

Commentaire de peter1789 le 26/06/2005 22:00:10

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 @+ !

Commentaire de kozaki le 19/12/2005 12:55:25

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)

Commentaire de roguery16 le 03/03/2009 03:24:45

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