Image mouvante derrière une image fixe

Image mouvante derrière une image fixe - HTML/CSS - Programmation

Marsh Posté le 29-03-2011 à 14:16:44    

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>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  7. <title>images</title>
  9. <style type="text/css">
  11. #cadre {
  12. position:absolute;
  13. background-color:#ffff00;
  14. margin-left: 100px;
  15. margin-top:100px;
  16. width:175px;
  17. height:400px;
  18. }
  20. img {
  21. position:absolute;
  22. left:0px;
  23. top:0px;
  24. }
  26. </style>
  28. <script type="text/javascript">
  30. var X=2, Y=2, l=0 , t=0;
  32. function i(n){
  33. return document.images[n]
  34. }
  36. window.onload=function(){setInterval(function(){
  37. l+=X;
  38. t+=Y;
  39. if(l<0 || l>i("im" ).width-i("fond" ).width){
  40.  X*=-1
  41. }
  42. if(t>i("im" ).height-i("fond" ).height || t<0){
  43.  Y*=-1
  44. }
  46. i("fond" ).style.left=l+"px";
  47. i("fond" ).style.top=t+"px";},10)
  48. }
  50. </script>
  52. </head>
  53. <body>
  55. <div id="cadre">
  56. <img id="fond" alt="fond" src="http://javatwist.imingo.net/sm01.gif" />
  57. <img id="im" alt=image src="http://javatwist.imingo.net/4.gif" />
  58. </div>
  60. </body>
  61. </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.

Reply

Marsh Posté le 29-03-2011 à 14:16:44   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed