Mettre sur son site un bandeau défilant

Aller en bas

Mettre sur son site un bandeau défilant Empty Mettre sur son site un bandeau défilant

Message  Gilbert le Sam 30 Oct 2010 - 1:13

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

_________________
Une visite sur mes sites internet: http://www.gite-en-alsace.net et http://www.un-gite-en-alsace.fr
Une visite sur L'annuaire des gîtes et chambres d'hôtes d'alsace: http://www.gite-en-alsace.net/annuaire.html
Une visite sur l'annuaire "Nos Gîtes et nos Chambres d'hôtes": http://www.nos-gites-et-nos-chambres-dhotes.fr
Gilbert
Gilbert
Admin

Messages : 2944
Date d'inscription : 16/08/2010
Age : 69
Localisation : MUTZIG, ALSACE, FRANCE

Voir le profil de l'utilisateur http://www.gite-en-alsace.net

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  Bretagne gites et BandB le Mer 18 Mai 2011 - 1:43

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 soleil
Bretagne gites et BandB
Bretagne gites et BandB

Messages : 2063
Date d'inscription : 03/11/2010
Localisation : lannion côtes de granit rose côtes d'armor

Voir le profil de l'utilisateur http://www.bretagne-armor.com

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  jpp_nice le Lun 17 Déc 2012 - 1:44

Journée archive pour moi aujourd'hui

Sympa le petit bout de code Gilbert jusque là j'arrive à suivre Smile))
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 ?
jpp_nice
jpp_nice

Messages : 364
Date d'inscription : 31/12/2010
Localisation : Normandie

Voir le profil de l'utilisateur http://www.lesfermesdeflorence.com

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  Gilbert le Lun 17 Déc 2012 - 2:44

jpp_nice a écrit:Journée archive pour moi aujourd'hui

Sympa le petit bout de code Gilbert jusque là j'arrive à suivre Smile))
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

_________________
Une visite sur mes sites internet: http://www.gite-en-alsace.net et http://www.un-gite-en-alsace.fr
Une visite sur L'annuaire des gîtes et chambres d'hôtes d'alsace: http://www.gite-en-alsace.net/annuaire.html
Une visite sur l'annuaire "Nos Gîtes et nos Chambres d'hôtes": http://www.nos-gites-et-nos-chambres-dhotes.fr
Gilbert
Gilbert
Admin

Messages : 2944
Date d'inscription : 16/08/2010
Age : 69
Localisation : MUTZIG, ALSACE, FRANCE

Voir le profil de l'utilisateur http://www.gite-en-alsace.net

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  jpp_nice le Lun 17 Déc 2012 - 3:45

Merci quand même
jpp_nice
jpp_nice

Messages : 364
Date d'inscription : 31/12/2010
Localisation : Normandie

Voir le profil de l'utilisateur http://www.lesfermesdeflorence.com

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  Bretagne gites et BandB le Lun 17 Déc 2012 - 4:26

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 scratch scratch
Bretagne gites et BandB
Bretagne gites et BandB

Messages : 2063
Date d'inscription : 03/11/2010
Localisation : lannion côtes de granit rose côtes d'armor

Voir le profil de l'utilisateur http://www.bretagne-armor.com

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  Gilbert le Lun 17 Déc 2012 - 4:46

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

_________________
Une visite sur mes sites internet: http://www.gite-en-alsace.net et http://www.un-gite-en-alsace.fr
Une visite sur L'annuaire des gîtes et chambres d'hôtes d'alsace: http://www.gite-en-alsace.net/annuaire.html
Une visite sur l'annuaire "Nos Gîtes et nos Chambres d'hôtes": http://www.nos-gites-et-nos-chambres-dhotes.fr
Gilbert
Gilbert
Admin

Messages : 2944
Date d'inscription : 16/08/2010
Age : 69
Localisation : MUTZIG, ALSACE, FRANCE

Voir le profil de l'utilisateur http://www.gite-en-alsace.net

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  jpp_nice le Lun 17 Déc 2012 - 5:20

Bretagne gites et BandB a écrit:Je ne sais pas, je ne vois pas cette case blanche sur mon bandeau??? http://www.bretagne-armor.com/index.html
roro22 scratch scratch

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
jpp_nice

Messages : 364
Date d'inscription : 31/12/2010
Localisation : Normandie

Voir le profil de l'utilisateur http://www.lesfermesdeflorence.com

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  jpp_nice le Lun 17 Déc 2012 - 5:25

Gilbert a écrit:
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)
jpp_nice
jpp_nice

Messages : 364
Date d'inscription : 31/12/2010
Localisation : Normandie

Voir le profil de l'utilisateur http://www.lesfermesdeflorence.com

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  Bretagne gites et BandB le Lun 17 Déc 2012 - 5:26

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 scratch scratch
Bretagne gites et BandB
Bretagne gites et BandB

Messages : 2063
Date d'inscription : 03/11/2010
Localisation : lannion côtes de granit rose côtes d'armor

Voir le profil de l'utilisateur http://www.bretagne-armor.com

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  Gilbert le Lun 17 Déc 2012 - 6:39

[quote="Bretagne gites et BandB"]
mais le "marquee" erreur n'affecte pas le référencement de la page?
roro22 scratch scratch

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

_________________
Une visite sur mes sites internet: http://www.gite-en-alsace.net et http://www.un-gite-en-alsace.fr
Une visite sur L'annuaire des gîtes et chambres d'hôtes d'alsace: http://www.gite-en-alsace.net/annuaire.html
Une visite sur l'annuaire "Nos Gîtes et nos Chambres d'hôtes": http://www.nos-gites-et-nos-chambres-dhotes.fr
Gilbert
Gilbert
Admin

Messages : 2944
Date d'inscription : 16/08/2010
Age : 69
Localisation : MUTZIG, ALSACE, FRANCE

Voir le profil de l'utilisateur http://www.gite-en-alsace.net

Revenir en haut Aller en bas

Mettre sur son site un bandeau défilant Empty Re: Mettre sur son site un bandeau défilant

Message  Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum