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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Images déroulantes: comment faire

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Images déroulantes: comment faire

n°1327947
fourniey
Rendre au prochain
Posté le 18-03-2006 à 20:45:50  profilanswer
 

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
mood
Publicité
Posté le 18-03-2006 à 20:45:50  profilanswer
 

n°1328004
nargy
Posté le 18-03-2006 à 22:32:23  profilanswer
 

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

n°1328019
fourniey
Rendre au prochain
Posté le 18-03-2006 à 23:04:46  profilanswer
 

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

n°1328061
fourniey
Rendre au prochain
Posté le 19-03-2006 à 00:51:58  profilanswer
 

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

n°1328143
nargy
Posté le 19-03-2006 à 03:55:49  profilanswer
 

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>

n°1328156
fourniey
Rendre au prochain
Posté le 19-03-2006 à 04:56:17  profilanswer
 

Ok, je regarde ça demain. Merci!


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

  Images déroulantes: comment faire

 

Sujets relatifs
[Problème] [mediawiki] Comment uploader beaucoup d'images[RESOLU] Images ne s'affichent pas
DSP+compression imagesMeilleur module postnuke pour une galerie d'images ?
scroll vertical ralentit par des imagesLien en forme de bouton avec des images
Faire des liens vers les images clés dans flash ?Gestion d'images sous MySQL
Problème avec des images sous IE [Résolu]Images dans un mail ???
Plus de sujets relatifs à : Images déroulantes: comment faire

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.068 secondes

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