Images déroulantes: comment faire

Images déroulantes: comment faire - HTML/CSS - Programmation

Marsh Posté le 18-03-2006 à 20:45:50    

J'aimerais pouvoir reproduire ce que l'on voit en haut de ce site soit les images déroulantes.
 
http://www.loadsoftware.net/sites/ [...] ndexfr.htm
 
J'ai essayé de regarder le code mais je ne vois pas.  
 
Merci!


Message édité par fourniey le 18-03-2006 à 21:07:13
Reply

Marsh Posté le 18-03-2006 à 20:45:50   

Reply

Marsh Posté le 18-03-2006 à 22:32:23    

oula, c est la grosse artillerie.
grosso modo, il y a une table dans laquelle il y a des layers qui défilent par un javascript qui modifient leur positions (style.left).
Sinon, apparemment c est un code gratuit disponible ici:
http://www.fatscripts.com/detailed/1449.php

Reply

Marsh Posté le 18-03-2006 à 23:04:46    

Merci beaucoup, je vais y jeter un coud d'oeil bientôt.

Reply

Marsh Posté le 19-03-2006 à 00:51:58    

Cet exemple fait défiler du texte alors que le site faisait tourner des photos.

Reply

Marsh Posté le 19-03-2006 à 03:55:49    

Bon ok, c est de la grosse bidouille...
 
Les tailles ne sont pas correctement calculées, mais si la bande d images est plus grande que la fenêtre ça marche à peu près, il faut répéter la série d images 2 fois pour quelle boucle sans trous, et il y a un texte <sup>.<sup> pour pas que mon firefox bug. Pas testé sous IE, ça ne doit surement pas marcher avec les autres navigateurs.
 

Code :
  1. <script>
  2. var scrollamount0=4;
  3. var scrollamount=scrollamount0;
  4. </script>
  6. <table width="80%" align=center border=1 cellpadding=0 cellspacing=0><tr><td align=center>
  7. <div id="support"
  8.      style="background-color:#ffbfaf;border:ridge #bfbfbf 7px;position:relative;overflow:hidden;">
  9. <div onmouseover="javascript:scrollamount=0;"
  10.      onmouseout="javascript:scrollamount=scrollamount0;"
  11.      id="bandeau" style="position:relative;left:0px;white-space:nowrap;vertical-align:middle;">
  12. <sup>.</sup><img width=60 height=50
  13. src="http://forum-images.hardware.fr/images/perso/delarue2.gif"><img width=60 height=50
  14. src="http://forum-images.hardware.fr/images/perso/delarue3.gif"><img width=60 height=50
  15. src="http://forum-images.hardware.fr/images/perso/delarue4.gif"><img width=60 height=50
  16. src="http://forum-images.hardware.fr/images/perso/delarue5.gif"><img width=60 height=50
  17. src="http://forum-images.hardware.fr/images/perso/delarue6.gif"><img width=60 height=50
  18. src="http://forum-images.hardware.fr/images/perso/delarue2.gif"><img width=60 height=50
  19. src="http://forum-images.hardware.fr/images/perso/delarue3.gif"><img width=60 height=50
  20. src="http://forum-images.hardware.fr/images/perso/delarue4.gif"><img width=60 height=50
  21. src="http://forum-images.hardware.fr/images/perso/delarue5.gif"><img width=60 height=50
  22. src="http://forum-images.hardware.fr/images/perso/delarue6.gif"><img width=60 height=50
  23. src="http://forum-images.hardware.fr/images/perso/delarue2.gif"><img width=60 height=50
  24. src="http://forum-images.hardware.fr/images/perso/delarue3.gif"><img width=60 height=50
  25. src="http://forum-images.hardware.fr/images/perso/delarue4.gif"><img width=60 height=50
  26. src="http://forum-images.hardware.fr/images/perso/delarue5.gif"><img width=60 height=50
  27. src="http://forum-images.hardware.fr/images/perso/delarue6.gif"><img width=60 height=50
  28. src="http://forum-images.hardware.fr/images/perso/delarue2.gif"><img width=60 height=50
  29. src="http://forum-images.hardware.fr/images/perso/delarue3.gif"><img width=60 height=50
  30. src="http://forum-images.hardware.fr/images/perso/delarue4.gif"><img width=60 height=50
  31. src="http://forum-images.hardware.fr/images/perso/delarue5.gif"><img width=60 height=50
  32. src="http://forum-images.hardware.fr/images/perso/delarue6.gif"><img width=60 height=50
  33. src="http://forum-images.hardware.fr/images/perso/delarue2.gif"><img width=60 height=50
  34. src="http://forum-images.hardware.fr/images/perso/delarue3.gif"><img width=60 height=50
  35. src="http://forum-images.hardware.fr/images/perso/delarue4.gif"><img width=60 height=50
  36. src="http://forum-images.hardware.fr/images/perso/delarue5.gif"><img width=60 height=50
  37. src="http://forum-images.hardware.fr/images/perso/delarue6.gif"><img width=60 height=50
  38. src="http://forum-images.hardware.fr/images/perso/delarue2.gif"><img width=60 height=50
  39. src="http://forum-images.hardware.fr/images/perso/delarue3.gif"><img width=60 height=50
  40. src="http://forum-images.hardware.fr/images/perso/delarue4.gif"><img width=60 height=50
  41. src="http://forum-images.hardware.fr/images/perso/delarue5.gif"><img width=60 height=50
  42. src="http://forum-images.hardware.fr/images/perso/delarue6.gif"><img width=60 height=50
  43. src="http://forum-images.hardware.fr/images/perso/delarue2.gif"><img width=60 height=50
  44. src="http://forum-images.hardware.fr/images/perso/delarue3.gif"><img width=60 height=50
  45. src="http://forum-images.hardware.fr/images/perso/delarue4.gif"><img width=60 height=50
  46. src="http://forum-images.hardware.fr/images/perso/delarue5.gif"><img width=60 height=50
  47. src="http://forum-images.hardware.fr/images/perso/delarue6.gif"><img width=60 height=50
  48. src="http://forum-images.hardware.fr/images/perso/delarue2.gif"><img width=60 height=50
  49. src="http://forum-images.hardware.fr/images/perso/delarue3.gif"><img width=60 height=50
  50. src="http://forum-images.hardware.fr/images/perso/delarue4.gif"><img width=60 height=50
  51. src="http://forum-images.hardware.fr/images/perso/delarue5.gif"><img width=60 height=50
  52. src="http://forum-images.hardware.fr/images/perso/delarue6.gif">
  54. </div>
  55. </div>
  56. </td></tr></table>
  58. <script>
  59. <!--
  60. function attrapemoi()
  61. {
  62.   var support=document.getElementById('support');
  63.   var bandeau=document.getElementById('bandeau');
  64.   var scroll=parseInt(bandeau.style.left)-scrollamount;
  65.   if(-scroll>bandeau.clientWidth/2) scroll+=bandeau.clientWidth/2;
  66.   bandeau.style.left=scroll+'px';
  67.   setTimeout("attrapemoi()",20);
  68. }
  69. attrapemoi();
  70. -->
  71. </script>

Reply

Marsh Posté le 19-03-2006 à 04:56:17    

Ok, je regarde ça demain. Merci!

Reply

Sujets relatifs:

Leave a Replay

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