Mettre sur son site un bandeau défilant

[Gilbert]

Pour ceux que ce sujet interesse, vous pouvez voir ce que ça donne sur la page d'entrée de notre annuaire alsacien au niveau de quelques photos de gîtes et de chambres qui défilent:
http://www.gite-en-alsace.net/annuaire.html


Le code HTML utilisé marche quel que soit la taille des photos. Les photos du bandeau sont juste listées par leur adresse internet (leur URL) dans le site où elles sont hébergées ( ex: http://www.123ici.com/upload/photosite/198930.jpg")

Si vous placez de plus grosses photos que les miennes, vous aurez tous simplement un plus gros bandeau en ajustant juste les variables width: 100px; height:75px;" au nombre de pixels souhaité pour la fenêtre.

Par contre, le temps de chargement de ta page, si elle contient un bandeau avec beaucoup de grosses photos, va être plus long. Comme je voulais mettre pas mal de photos sans avoir un temps de chargement trop long, j'ai donc mis dans notre annuaire alsacien uniquement des petites photos.

Pour bloquer le bandeau déroulant de photos, il suffit de mettre la pointeur de la souris dessus, comme vous pouvez le voir sur cette page ( http://www.gite-en-alsace.net/annuaire.html )
C'est la séquence de code: onmouseover="this.stop()" onmouseout="this.start()"> qui provoque cette fonction

Le code HTML à placer dans ta page est donc tres simple:

Dans le début du code
<p><marquee style="border: 0pt none ; font-family: Arial; font-size: 10px;
font-weight: normal; background-color: CAFEB2; width: 100px; height:
75px;"
scrollamount="2" scrolldelay="10"
onmouseover="this.stop()" onmouseout="this.start()">

scrollamount="2" donne le pas de décalage en pixels et scrolldelay="10" le temps entre chaque décalage donc en variant les deux on joue sur la vitesse du déroulement.

Le code se termine par
</marquee></p>

et entre les deux, on a la liste des photos concernées dans l'ordre dans lesquelles on veut les faire dérouler.

Si vous savez modifier le code HTML de vos pages, vous pouvez donc ecrire en HTML le code vous même pour obtenir ce résultat.

REMARQUE IMPORTANTE:
Comme dans nos posts, le code HTML est parfois interprété par le moteur du forum, un copier/collé depuis un post peux ne pas correspondre exactement au code HTML à utiliser. Pour eviter ce genre de désagrément; il y a 2 solution:
- la première consiste à récuperer le code directement dans la page donnée comme exemple (en affichant la page dans Internet Explorer, en cliquant dans le menu "page" sur "Afficher la source", puis dant le code HTML de la page affichée de rechercher la séquence qui va de la balise
marquee à la balise /marquee, de copier cette séquence puis de la coller dans le code HTML de ta page avant de la modifier pour tes besoins. (Ces balises sont presentes deux fois dans ma page http://www.gite-en-alsace.net/annuaire.html car il y a 2 bandeaux déroulant, donc deux exemples)
- la deuxieme consiste à me demander par email de vous envoyer la séquence de code HTML sous la forme d'un fichier texte. J'y répondrai avec la séquence de code HTML en attachement et si j'en trouve le temps un petit mode d'emploi pour l'adapter à vos besoin.

POUR EN SAVOIR PLUS:Consultez ces pages:

http://faireunblog.over-blog.com/article-faire-defiler-un-texte-balise-marquee-39101446.html

http://www.top-assistante.com/web/scripts/marquee.php

et amusez vous bien....

Gilbert

[Bretagne gites et BandB]

SOS dépannage???? j'ai un beugueeeeeeeeeeeeeeeee!!!!! le bandeau défilant est coupé en 2 dans le sens horizontal sur la page http://www.bretagne-armor.com/armor-gite-france-gites-lannion.html je pense que ça ne vient pas du script du bandeau mais un truc qui bloque dans la page elle même
Robert de bretagne

[jpp_nice]

Journée archive pour moi aujourd'hui

Sympa le petit bout de code Gilbert jusque là j'arrive à suivre ))
Mais par contre on a une case vide de la taille d'une photo entre chaque séquence as tu un moyen de la supprimer ?

[Gilbert]

Journée archive pour moi aujourd'hui

Sympa le petit bout de code Gilbert jusque là j'arrive à suivre ))
Mais par contre on a une case vide de la taille d'une photo entre chaque séquence as tu un moyen de la supprimer ?

Désolé, pas moyen de supprimer cet espace entre deux séquences de photos successives...

Gilbert

[jpp_nice]

Merci quand même

[Bretagne gites et BandB]

Je ne sais pas, je ne vois pas cette case blanche sur mon bandeau??? http://www.bretagne-armor.com/index.html
D'autre part, à chaque fois que je vérifie le code html d'une page, ça indique erreur dès qu'il y a de noté
</marquee>
est-ce normal?
roro22

[Gilbert]

L'absence de case blanche est liée à ton choix de faire un défilement qui alterne le sens de défilement (de "gauche à droite" puis de "droite à gauche") en fin de séquence.

Pour ce faire, il suffit d'ajouter l'attribut BEHAVIOR="alternate" dans l'instruction marquee
Exemple:
<marquee BEHAVIOR="alternate" onMouseOver="this.stop()" onMouseOut="this.start()" direction="right" scrollamount="5">

La commande marquee, bien que fort utile, n'est pas reconnue par la norme W3C. C'est la raison de cette erreur.
Beaucoup d'erreurs par rapport à la norme W3C sont d'ailleurs sans conséquence pour l'affichage de vos sites car les navigateurs actuels, pour etre utilisables, ont du s'adapter au parc existant des pages Web, qui dans leur grande majorité ne sont pas 100% conforme W3C.

Gilbert

[jpp_nice]

Je ne sais pas, je ne vois pas cette case blanche sur mon bandeau??? http://www.bretagne-armor.com/index.html
roro22

La case blanche chez moi correspond au fond, la couleur ou le motif dépend donc du fond de la page web...Comme le défilement va de droite à gauche, la case correspond à la taile de l'image qui se remplit peu à peu

[jpp_nice]

Pour ce faire, il suffit d'ajouter l'attribut BEHAVIOR="alternate" dans l'instruction marquee
Exemple:
<marquee BEHAVIOR="alternate" onMouseOver="this.stop()" onMouseOut="this.start()" direction="right" scrollamount="5">

Gilbert

Cà marche impec merci (behavior en minuscule)

[Bretagne gites et BandB]

L'absence de case blanche est liée à ton choix de faire un défilement qui alterne le sens de défilement (de "gauche à droite" puis de "droite à gauche") en fin de séquence.

c'est bien ce que j'avais supposé, d'ailleurs je crois que je l'avais choisi pour supprimer cette case blanche.... mais le "marquee" erreur n'affecte pas le référencement de la page?
roro22

[Gilbert]

[quote="Bretagne gites et BandB"]

mais le "marquee" erreur n'affecte pas le référencement de la page?
roro22

Je ne le pense pas.
Le fait de mettre en avant la conformité W3C comme critère de bon référencement doit à mon avis être interprété avec prudence. De nombreuses pages sont bien placées sans être 100% conforme W3C...
C'est pas plus mal d'etre conforme W3C, mais avant que Google ne pénalise des pages qui ne le sont pas, il faudrait qu'elle soient particulièrement truffées d'erreurs.

Gilbert

[Contenu sponsorisé]