Bandeau d'images

[franue]

J'aimerai faire défiler quelques photos dans une fenêtre en première page de mon site.
Comme sur le site d'Hellio et Van Ingen par exemple : http://www.hellio-vaningen.fr/

Comment faire?
Le reste de mon site est réalisé avec Dreamweaver. Je peux inclure cette "animation" dans une page?

Franue

[P-F]

Regarde le code source de la page ça te donnera des idées...

[moutjer]

Ou demande à l'ami Benoist!

[Jemo]

Il suffit de faire un assemblage avec plusieurs photos puis de placer la référence à cette image dans un balise IMG qui elle même se trouvera dans une balise MARQUEE
Attention, cette solution ne fonctionne que sous IE je crois

Jemo

[franue]

Bon bah.... J'ai pas encore réussiiiiiiiii


Franue

[-Eric-]

J'ai essayé sur mon site ça fonctionne. Voici la ligne HTML : <marquee><img src='mon-image'></img></marquee>

A+

[Jemo]

Génial !
Après tu peux améliorer un peu le tout de cette façon avec quelques paramètres
Tu peux trouver un petit exemple ICI dans le menu "Galerie"

<DIV style="LEFT: 28px; POSITION: absolute; TOP: 110px">
<MARQUEE onmouseover=this.stop() style="BORDER-RIGHT: #b4c1d3 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: #b4c1d3 0px solid; PADDING-LEFT: 0px; BACKGROUND: #9c9c9c; PADDING-BOTTOM: 5px; BORDER-LEFT: #b4c1d3 0px solid; WIDTH: 100px; PADDING-TOP: 5px; BORDER-BOTTOM: #b4c1d3 0px solid; HEIGHT: 330px" onmouseout=this.start() scrollAmount=1 scrollDelay=0 direction=up width=50 height=100><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000075_080111.jpg" width=100><BR><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000008_032402.jpg" width=100><BR><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000054_061012.jpg" width=100><BR><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000052_050302.jpg" width=100><BR><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000012_021119.jpg" width=100><BR><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000017_110203.jpg" width=100><BR><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000007_030305.jpg" width=100><BR><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000015_040312.jpg" width=100><BR><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000059_061602.jpg" width=100><BR><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000019_020912.jpg" width=100><BR></MARQUEE></DIV>

[franue]

Merci, je vais essayer.
Il suffit que je remplace dans la ligne 'mon image' par mes photos?

Franue

[Jemo]

Oui, il suffit de remplacer toutes les balises IMG en mettant en référence tes propres images
Ensuite tu peux jouer avec les options de la balise MARQUEE
Tu peux également mettre par exemple autour de la chaque balise IMG une balise A pointatn vers ton image en grand
ex : <A href="http://www.cj2m.net/asso/cpe/pages/images/000075_080111.jpg" target=_Top><IMG height=60 src="http://www.cj2m.net/asso/cpe/pages/images/000075_080111.jpg" width=100></A>
De cette façon, si tu passes la sourie au dessus des vignettes, le scroling s'arrête et si tu cliques sur la vignette, l'image se lance en grand
Bien sur ça n'est qu'un exemple qu'il faut adapter à tes besoins ...

Jemo

[mumu]

Attention, cette solution ne fonctionne que sous IE je crois
Jemo

Attention à ce genre d'astuce, c'est fermer la porte à tout ceux qui n'utilisent pas IE, et ils sont nombreux. Internet c'est fait pour partager et ouvrir aux autres, par pour restreindre et exclure. 

Hellio et Van Ingen utilisent du script et des calques pour faire défiler un bandeau d'après ce que j'ai vu du code source. Tout est dedans, y'a qu'à recopier. Bon evidement, c'est pas forcement évident au premier abord 

[franue]

Aïe ça se complique 

Franue

[Jemo]

Oui comme je l'avais précisé, la solution de la balise MARQUEE simple à mettre en place ne fonctionne que sous IE (qui représente à la louche 90% des browser utilisés)
Si tu souhaites avoir une solution compatble avec tous les browsers et donc respecter la norme W3C, il te faudra surement passer par un script java et là ça se complique ...
Essaye de voir le script du site précité sinon en faisant quelques recherches tu devrais en trouver comme celui-ci par exemple

Jemo

[-Eric-]

bon, je vais laisser tomber la bande pour le moment.

[Mat]

Salut,

Je ne sait pas si tu as définitivement oublié ce bandeau mais j'étais en train de chercher pour mon site et je suis tombé la dessus suite à la réponse de Jemo :
http://www.dynamicdrive.com/dynamicindex14/leftrightslide2.htm

A mon avis y a moyen d'y arriver en adaptant un peu les images et le temps entre chaque images.
Je te tiens au courant.

Et merci Jemo pour ce site de Script 
Mat

[franue]

J'ai essayé sur mon site ça fonctionne. Voici la ligne HTML : <marquee><img src='mon-image'></img></marquee>
A+

J'ai quasiment réussi sauf un truc : le bandeau ne se "ferme" pas. Une fois que toutes les images sont passées, il recommence depuis la première, il ne tourne pas en boucle...

Est-ce la  dernière balise </img> qui boucle le bandeau? Si oui, faut-il remplacer img par une image?

Thanks
Franue

[Mat]

Ça marche chez moi mais j'ai pas utilisé la balise <marque> qui fonctionne que sous IE apparemment.
Si tu veux le Script adapté pas de soucis.

Mat

[franue]

Ça marche chez moi mais j'ai pas utilisé la balise qui fonctionne que sous IE apparemment.
Si tu veux le Script adapté pas de soucis pas de soucis.
Mat

Je veux bien 

J'ai essayé en virant la balise </img>.. Marche pas 

Franue

[Mat]

Normalement tu dois pouvoir le récupérer la : http://reflexnaturealite.free.fr/testfranue.txt
Il suffit de remplacer la taille, la source de tes images.
Tu peux modifier la vitesse de défilement en remplaçant pour chaque image : setTimeout("move1(tlayer)",85) plus le chiffre est grand plus la vitesse est lente.

Le plus dur c'est de le placer la ou tu veux. Pour le centrer j'ai inséré un une balise <div align="center">.

Bon courage.
A plus

Mat

[franue]

Ok merci, j'avance, j'avance......

Comment je fais pour récupérer ton script?

Franue

[-Eric-]

Salut. Je n'ai pas réussi à le récupérer non plus 

[franue]

J'ai trouvé ça :

http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

Franue

[-Eric-]

Merci. Je vais essayer ça. Il faudra changer la taille du bandeau pour l'élargir à la taille de la page.

On se tient au courant..

[franue]

Merci. Je vais essayer ça. Il faudra changer la taille du bandeau pour l'élargir à la taille de la page.

On se tient au courant..

Pas de problème, je viens de réussir.
Dans les paramètres tu augmentes les pixels.

Ce n'est pas encore parfait. La jonction entre la première et la dernière photo comporte  une marge (uniquement là), je n'arrive pas à la virer 

Franue

[franue]

Bon c'est fait.

Le résultat ici : http://www.photoceane.com

A+
Franue

[Mat]

Salut

Désolé, les fêtes de fin d'année....
En cliquant sur le liens (http://reflexnaturealite.free.fr/testfranue.txt) normalement ça ouvre un fichier texte à copie/coller...
En tout cas le rendu est top.
J'ai galèré aussi avec cette petite marge blanche,  j'ai mis un nom de couleur comme le fond de mon site :var scrollerbgcolor='333333'

On a réussi...