Votre question

Script image flottante

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
16 Mai 2008 15:07:08

Bonjour,

Depuis quelque temps, je crée un site et je dois mettre un logo flottant dessus à l'aide d'un script qui est le suivant:

  1. <body onLoad="bang()"><!--déclenchement de la fonction au chargement de la page-->
  2. <div id="bing" style="position:absolute;">
  3. <img src="projet.gif" alt="bing" /><!--remplacer "mon_image.jpg" par l'URL de l'image de votre choix--></div>
  4. <script type="text/javascript">
  5. abcisse = 0;//abcisse du coin supérieur gauche de l'image
  6. ordonnee = 0;//ordonnee du coin supérieur gauche de l'image
  7. nx = 1;//changement de l'abcisse
  8. ny = 1;//changement de l'ordonnee
  9. vitesse = 15;//vitesse du mouvement : vous pouvez changer cette valeur
  10. function bang() {
  11. document.getElementById("bing").style.left = abcisse;//positionnement horizontal de l'image
  12. document.getElementById("bing").style.top = ordonnee;//positionnement vertical de l'image
  13. largeur = (navigator.appName != "Microsoft Internet Explorer")? window.innerWidth : document.body.offsetWidth;//la variable largeur a pour valeur la largeur de la fenêtre
  14. hauteur = (navigator.appName != "Microsoft Internet Explorer")? window.innerHeight : document.body.offsetHeight;//la variable hauteur a pour valeur la hauteur de la fenêtre
  15. bas = (navigator.appName != "Microsoft Internet Explorer")? document.getElementById('bing').clientHeight : document.getElementById('bing').offsetHeight;//la variable bas contient la hauteur de l'image
  16. droite = (navigator.appName != "Microsoft Internet Explorer")? document.getElementById('bing').clientWidth : document.getElementById('bing').offsetWidth;//la variable droite contient la largeur de l'image
  17. //début du code essentiel
  18. if ((ordonnee + bas) >= hauteur) ny = -1;
  19. if ((abcisse + droite) >= largeur) nx = -1;
  20. if (ordonnee <= 0) ny = 1;
  21. if (abcisse <= 0) nx = 1;
  22. abcisse += nx;
  23. ordonnee += ny;
  24. //fin
  25. setTimeout('bang()',vitesse);//la fonction se rappelle d'elle-même par un temps en millisecondes défini par la variable vitesse
  26. }
  27.  
  28. </script>
  29. </body>



Ce qui donne cela:


Le logo "Projet?" va sur le coté droit et à gauche, c'est le contraire, il s'arrête bien avant vers le menu verticale du site... Comment faire pour que ce logo rebondit simplement sur tout les cotés??

Merci d'avance!! ++

Autres pages sur : script image flottante

16 Mai 2008 15:27:12

je crois que ton problème, c'est qu'il ne prend pas en compte les scrollbar pour donner les dimension de la fenètre.

du coup, ça passe derrière la scrollbar.

après, ce genre d'artifice en javascript est :
- moche
- irritant pour l'internaute
- génant pour la compréhesion du site (imagine! une image qui vient devant le texte que tu essaies de lire toutes les 30 secondes!!! c'est insupportable!)
- ne marche pas tout le temps.

mon conseil : vire ce script. ça règlera ton problème et rendra ton site meilleur.
16 Mai 2008 15:37:12

Je fais un site pour les réseaux CFPPA de l'enseignement agricole qui sera ensuite publié au niveau national. La charte graphique je dois la respecter de A a Z même si je trouve ça moche et gênant aussi!! lol

Tu connaitrais pas un script de ce type qui fonctionne bien stp?
Contenus similaires
16 Mai 2008 15:59:21

ton script fonctionne.

retire 15 pixel sur la largeur.

ou alors, j'ai mal compris le comportement de ton image flottante.
16 Mai 2008 16:09:52

Te laisse pas faire bob !
Tu doit etre fort de proposition et avoir un esprit critique ! une charte graphique ok, mais un ergo nul à chier c'est autre chose...

Tu peut même avancer le fait qu'avec un tel logo le site ne sera jamais accessible et vu que ton site a l'air d'etre public (?) c'est grave !
c'est peut etre le moment d'avancer les arguments :p 
16 Mai 2008 16:34:05

ouais, comme tracks!
montre que tu as des couilles! enfin, si t'es bien un garçon comme laisse supposer ton pseudo...
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS