Bonjour à tous,
Voilà, j'aimerai faire une galerie d'images pour mon site. Mais pas une galerie banale sous forme matricielle. En fait, je compte disposer mes images sous la forme d'un bandeau contenant les miniatures. Ce que j'entends par "bandeau", c'est que toutes les images sont sur une seule et même rangée, à la file indienne. Bien sûr, la largeur bandeau risque d'être trop petite pour contenir toutes les miniatures. C'est pourquoi je compte mettre une flèche à droite et à gauche, pour pouvoir faire défiler les images dans un sens ou dans l'autre, selon les désirs de l'utilisateur. C'est donc ici que le Javascript entre en jeu.
Avant d'aller plus loin, j'aimerai juste préciser que je veux un code qui respecte à 100% les spécifications xhtml (et accessoirement CSS) - pas question d'utiliser des <marquee> donc - sans recourir au tableau pour mettre en forme le design. Autre chose, j'aimerai que la largeur du bandeau soit totalement fluide, et s'adapte à la largeur de la page. Pour faire simple, on va dire que ma page contient uniquement le bandeau. J'ai donc un <body> parfaitement vide.
Pour présenter les miniatures, je compte utiliser une liste non ordonnée, chaque image étant encadrée dans <li> </li> donc, en inline, pour que les miniatures s'étendent horizontalement. Cette liste sera contenue dans un <div> qui représentera donc le bandeau. Pour ce qui est des flèches, je metterai des images, avec un positionnement flottant gauche (je pense que ça fera l'affaire).
A partir de là, je bloque, je ne sais vraiment pas trop comment m'y prendre pour le javascript (je n'y connais pas grand chose je l'avoue
). Je sais que je vais devoir utiliser l'évènement onMouseOver lorsque la souris passera sur la flèche gauche ou droite, mais comment faire pour décaler la liste de X pixels vers la gauche ou vers la droite?
Merci de votre aide.
Modifié par twkjp (06 Jul 2006 - 18:27)
Voilà, j'aimerai faire une galerie d'images pour mon site. Mais pas une galerie banale sous forme matricielle. En fait, je compte disposer mes images sous la forme d'un bandeau contenant les miniatures. Ce que j'entends par "bandeau", c'est que toutes les images sont sur une seule et même rangée, à la file indienne. Bien sûr, la largeur bandeau risque d'être trop petite pour contenir toutes les miniatures. C'est pourquoi je compte mettre une flèche à droite et à gauche, pour pouvoir faire défiler les images dans un sens ou dans l'autre, selon les désirs de l'utilisateur. C'est donc ici que le Javascript entre en jeu.
Avant d'aller plus loin, j'aimerai juste préciser que je veux un code qui respecte à 100% les spécifications xhtml (et accessoirement CSS) - pas question d'utiliser des <marquee> donc - sans recourir au tableau pour mettre en forme le design. Autre chose, j'aimerai que la largeur du bandeau soit totalement fluide, et s'adapte à la largeur de la page. Pour faire simple, on va dire que ma page contient uniquement le bandeau. J'ai donc un <body> parfaitement vide.
Pour présenter les miniatures, je compte utiliser une liste non ordonnée, chaque image étant encadrée dans <li> </li> donc, en inline, pour que les miniatures s'étendent horizontalement. Cette liste sera contenue dans un <div> qui représentera donc le bandeau. Pour ce qui est des flèches, je metterai des images, avec un positionnement flottant gauche (je pense que ça fera l'affaire).
A partir de là, je bloque, je ne sais vraiment pas trop comment m'y prendre pour le javascript (je n'y connais pas grand chose je l'avoue
). Je sais que je vais devoir utiliser l'évènement onMouseOver lorsque la souris passera sur la flèche gauche ou droite, mais comment faire pour décaler la liste de X pixels vers la gauche ou vers la droite?Merci de votre aide.
Modifié par twkjp (06 Jul 2006 - 18:27)