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
Regarde le code source de la page ça te donnera des idées...
Ou demande à l'ami Benoist! :)
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
Bon bah.... J'ai pas encore réussiiiiiiiii
Franue
J'ai essayé sur mon site ça fonctionne. Voici la ligne HTML : <marquee><img src='mon-image'></img></marquee>
A+
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 (http://www.cj2m.net/asso/cpe/) 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>
Merci, je vais essayer.
Il suffit que je remplace dans la ligne 'mon image' par mes photos?
Franue
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
Citation de: Jemo le 06 Décembre 2008, 13:06:17
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. fhfh
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 :mrgreen:
Aïe ça se complique :?
Franue
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 (http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm) par exemple
Jemo
bon, je vais laisser tomber la bande pour le moment.
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 :grin:
Mat
Citation de: -Eric- le 23 Décembre 2008, 05:57:31
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
Ç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
Citation de: Mat le 30 Décembre 2008, 23:10:37
Ç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 uy8
J'ai essayé en virant la balise </img>.. Marche pas :?
Franue
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
Ok merci, j'avance, j'avance......
Comment je fais pour récupérer ton script?
Franue
Salut. Je n'ai pas réussi à le récupérer non plus :?
J'ai trouvé ça :
http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm
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..
Citation de: -Eric- le 31 Décembre 2008, 17:21:31
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
Bon c'est fait.
Le résultat ici : http://www.photoceane.com
A+
Franue
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...
))) )))) uy8
Citation de: franue le 31 Décembre 2008, 16:27:48
J'ai trouvé ça :
http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm
Franue
ça fonctionne pas mal :) Tu as procédé comment pour placer ton bandeau là où tu voulais ?
Tu fais un copié/collé ou tu le souhaites.
Pour ma part, j'ai ouvert la fenêtre "sorce HTLM" sous Dreamweaver pour finaliser la taille du bandeau et effectuer quelques réglages.
Et oui, il faut mettre les mains dans le camboui dans temps en temps :grin:
Franue
il n'y a pas une ligne de code pour mettre les valeurs exactes (x et y ?) ? Au lieu de copier coller au pif. C'est pas très précis ça. Ca m'énerve de rien comprendre au code html :mrgreen:
J'ai réussi à le coller exactement ou je le voulais en passant par la fenêtre HTLM...
Franue
je vais essayer. Merci :)
bah voilà
http://www.julienboisard.fr/
ca fait un moment que je voulais faire ça :shock: Merci beaucoup :)
Sympa. uy8
Je trouve juste que les photos défilent un peu vite, non?
Franue
Citation de: franue le 02 Janvier 2009, 13:02:19
Sympa. uy8
Je trouve juste que les photos défilent un peu vite, non?
Franue
peut être oui. Je vais essayer de changer ça :)
Salut Djudju,
Il suffit d'augmenter la valeur
setTimeout("move1(tlayer)",85) pour chaque image
Plus le chiffre est grand plus la vitesse est lente.
:)
A+
Mat
Citation de: Mat le 02 Janvier 2009, 13:39:18
Salut Djudju,
Il suffit d'augmenter la valeur
setTimeout("move1(tlayer)",85) pour chaque image
Plus le chiffre est grand plus la vitesse est lente.
:)
A+
Mat
merci :wink:
j'avais changé cette valeur : var slidespeed=2 (je suis passé de 3 à 2)
Je sais pas si c'est bon mais ça va moins vite :grin:
Ah oui mille excuses tu n'as pas utilisé le même script que moi en plus...Désolé...
Le rendu est super.
Bravo.
Mat
Impeccable uy8
Franue
Je viens de changer de script...le votre est ))))
Pour faire les PURISTES, c'est possible de rajouter un liens sur l'image défilante en complétant :
leftrightslide[0]='<a href="
http://votre lien icic"><img src="dynamicbook1.gif" border=1></a>'
Franchement ça rend super bien.
Merci à vous.
Mat
Franue : ton bandeau est bon mais quand on clique dessus ça ouvre une page vide.
Il faut que tu supprimes cette fonction ou que tu mettes un lien vers ta deuxième page à la place de "entrez" par exemple.
Je suis en train de bricoler le mien si j'arrive à ce que je veux je vous le montrerai. Mais c'est pas sur :mrgreen:
Citation de: -Eric- le 02 Janvier 2009, 16:56:47
Franue : ton bandeau est bon mais quand on clique dessus ça ouvre une page vide.
Il faut que tu supprimes cette fonction ou que tu mettes un lien vers ta deuxième page à la place de "entrez" par exemple.
En effet, je n'avais pas vu ça....
C'est quelle fonction?
Franue
leftrightslide[0]='<a href="http://tu mets ton lien ici"><img src="dynamicbook1.gif" border=1></a>'
Je crois que c'est ça.
Je viens de supprimer cette ligne <a href="http://tu mets ton lien ici">
C'est bien ça, du cout je n'ai plus le petit cadre blanc.... Mais ça fonctionne mieux. Je ne voulais pas que l'on puisse cliquer sur les images....
A+
Franue
Merci Mat. C'est exactement ça. Je vais faire comme Franue mais j'ai essayé de mettre le lien vers les galeries dans chaque ligne et ça marche. en cliquant sur n'importe quelle image ça envoie vers la page de galeries.
J'ai plus qu'à affiner tout ça quand j'aurai le temps.
A+
Voilà : http://www.ericegea-photomacro.com/index2.html
En fait il n'y a qu'une seule photo (un bandeau fait avec photofiltre de 2500pix de large) qui défile en boucle. En cliquant dessus on ouvre la page de galleries. Je l'améliorerai plus tard.
A+