Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1843 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Image mouvante derrière une image fixe

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Image mouvante derrière une image fixe

n°2066825
LowTage
Posté le 29-03-2011 à 14:16:44  profilanswer
 

Bonjour,  
 
J'ai récupéré un script JavaScript sur un forum, il répond un peu près à ce que j'aimerais avoir mais j'ai un peu de mal à l'adapter. Je pense qu'il aurait juste fallu changer les dimensions. Mais je n'arrive pas à l'adapter. Je débute en JavaScript, est ce que vous pourriez m'aider à comprendre ce script ? S'il vous plait :)
 
Voici le script :  
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"><head>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. <title>images</title>
  6. <style type="text/css">
  7. #cadre {
  8. position:absolute;
  9. background-color:#ffff00;
  10. margin-left: 100px;
  11. margin-top:100px;
  12. width:175px;
  13. height:400px;
  14. }
  15. img {
  16. position:absolute;
  17. left:0px;
  18. top:0px;
  19. }
  20. </style>
  21. <script type="text/javascript">
  22. var X=2, Y=2, l=0 , t=0;
  23. function i(n){
  24. return document.images[n]
  25. }
  26. window.onload=function(){setInterval(function(){
  27. l+=X;
  28. t+=Y;
  29. if(l<0 || l>i("im" ).width-i("fond" ).width){
  30.  X*=-1
  31. }
  32. if(t>i("im" ).height-i("fond" ).height || t<0){
  33.  Y*=-1
  34. }
  35. i("fond" ).style.left=l+"px";
  36. i("fond" ).style.top=t+"px";},10)
  37. }
  38. </script>
  39. </head>
  40. <body>
  41. <div id="cadre">
  42. <img id="fond" alt="fond" src="http://javatwist.imingo.net/sm01.gif" />
  43. <img id="im" alt=image src="http://javatwist.imingo.net/4.gif" />
  44. </div>
  45. </body>
  46. </html>


 
Voici le résultat :  
http://javatwist.imingo.net/imagemouvante.htm
 
Ce que j'aimerais adapter c'est la taille de l'image pour par exemple mettre une image de 655*305.  
 
Merci beaucoup de votre aide.
 
Cordialement, LowTage.

mood
Publicité
Posté le 29-03-2011 à 14:16:44  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Image mouvante derrière une image fixe

 

Sujets relatifs
agrandisseur image / diaporama pour site webbug d'affichage image
[VIEW] > avoir la main d'afficher ou non une image html helperSignature HTML - aligner image à droite
[html& css] 3 DIV côte-à-côte (dont 2 en taille fixe)?Problème de positionnement image dans zone
parourir imageRedimmensionner une image
Aide pour capturer image de webcam sur volcan actifPublication de ma vidéo avec player FVL (lien sur une image)
Plus de sujets relatifs à : Image mouvante derrière une image fixe


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR