|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
seabird
WRInaute occasionnel
Inscrit le: 01 Déc 2003
Messages: 147
|
 Posté le : Jeu Mar 27, 2008 12:24 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
Bonjour,
Pour rendre plus lisible le site. J'ai utilisé le <div display:none >...
En fait j'ai une liste de liens comme par exemple :
lien1
lien2
lien3
...
A chaque passage de la sourie sur le lien cela m'affiche le bloc avec les caractéristiques de ce lien ( description, commentaire, photo ...)
J'ai utilisé ce script:
| Code: |
<script>
function visibilite(thingId)
{
var i;
var targetElement;
for(i=1; i<=3i++){
targetElement = document.getElementById("divid" + i) ;
targetElement.style.display = "none" ;
}
targetElement = document.getElementById("divid" + thingId) ;
targetElement.style.display = "" ;
}
</script> |
Puis ensuite ces lignes:
| Code: |
<a href="site1" onMouseOver="javascript:visibilite('1');" target="_blank">lien1</a><br>
<a href="site2" onMouseOver="javascript:visibilite('2');" target="_blank">lien2</a><br>
<a href="site3" onMouseOver="javascript:visibilite('3');" target="_blank">lien3</a><br>
<div id="divid1" style="display:none;">**** CONTENU LIEN1 *****</div>
<div id="divid2" style="display:none;">**** CONTENU LIEN2 *****</div>
<div id="divid3" style="display:none;">**** CONTENU LIEN3 *****</div> |
Mais à la vue de ce que je peux lire. Google peut nous pénaliser pour ce div display none.
Quand est -il exactement ?
Merci |
|
| |
|
 |
SuperCureuil
WRInaute impliqué
Inscrit le: 09 Mar 2007
Messages: 488
Localisation: Bxl, Belgique
|
| Posté le : Jeu Mar 27, 2008 13:04 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
Salut,
Google ne va pas te "pénaliser", simplement il va peut-être passer à côté de la partie concernée puisqu'il ne lit pas complètement le JS. Cela sera donc dommageable pour tes pages mais en aucun cas il n'y aura de pénalité.
Le mieux à faire, c'est d'employer les balises <noscript></noscript> qui sont faites pour ça ...
@+ |
|
| |
|
|
French Dread
WRInaute accro
Inscrit le: 07 Mai 2003
Messages: 1770
Localisation: Lille et Paris
|
| Posté le : Jeu Mar 27, 2008 13:08 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
Non Google ne passera pas à coté du contenu, car le contenu de l'infobulle est techniquement accessible : javascript ne fait que modifier la propriété CSS à la volée.
Cela dit c'est moyennement accessible : mieux vaudrait mettre tes div en visible par défaut, et gérer le non-affichage par javascript, ce qui permet de présenter le contenu aux utilisateurs ayant javascript desactivé. |
|
| |
|
|
rudddy
WRInaute impliqué
Inscrit le: 01 Aoû 2007
Messages: 442
Localisation: Marseille
|
| Posté le : Jeu Mar 27, 2008 13:35 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
| moi je ne penses pas que GG va té penaliser : ton but n'étant pas de cacher du contenu pour faire de l'optimisation, mais plutôt de proposer à GG un véritable contenu (puisque ce sont des menus déroulants) susceptibles d'intéresser l'utilisateur |
|
| |
|
|
tonguide
WRInaute passionné
Inscrit le: 28 Nov 2003
Messages: 979
|
| Posté le : Jeu Mar 27, 2008 13:55 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
J'avais posé la même question sur un topic (que je n'avais pas créé, donc je serais pas le retrouver) puisque j'utilise la même chose sur un de mes sites. L'une des personnes qui avaient répondu avait fait le test avant après avant (il avait remis son code du début), et à chaque fois qu'il retirait le display:none, il remontait de 2 places dans le classement sur ces mots clés.
Sinon je pense que la méthode de French Dread doit être plutôt bonne. C'est à dire tout en display:block (ou autre selon les cas) et via un window.onload mettre en display:none ensuite, ce qui devrait peut-être gêner moins Google. A tester ... |
|
| |
|
|
SuperCureuil
WRInaute impliqué
Inscrit le: 09 Mar 2007
Messages: 488
Localisation: Bxl, Belgique
|
| Posté le : Jeu Mar 27, 2008 14:38 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
| Citation: |
| Cela dit c'est moyennement accessible : mieux vaudrait mettre tes div en visible par défaut, et gérer le non-affichage par javascript, ce qui permet de présenter le contenu aux utilisateurs ayant javascript desactivé. |
Bonne idée, moins prise de tête et finalement plus juste par rapport à l'effet du script ...
Merci pour le tuyau  |
|
| |
|
|
seabird
WRInaute occasionnel
Inscrit le: 01 Déc 2003
Messages: 147
|
| Posté le : Jeu Mar 27, 2008 14:41 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
| French Dread a écrit: |
Non Google ne passera pas à coté du contenu, car le contenu de l'infobulle est techniquement accessible : javascript ne fait que modifier la propriété CSS à la volée.
Cela dit c'est moyennement accessible : mieux vaudrait mettre tes div en visible par défaut, et gérer le non-affichage par javascript, ce qui permet de présenter le contenu aux utilisateurs ayant javascript desactivé. |
Oui effectivement cela me parait plus judicieux de faire comme ça.
Voila donc ce que j'ai fais:
| Code: |
<script>
function visibilite(thingId)
{
var i;
var targetElement;
for(i=1; i<=3;i++){
targetElement = document.getElementById("divid" + i) ;
targetElement.style.display = "none" ;
}
targetElement = document.getElementById("divid" + thingId) ;
targetElement.style.display = "" ;
}
</script>
<script>
function cacher()
var i;
var targetElement;
for(i=1; i<=3;i++){
targetElement = document.getElementById("divid" + i) ;
targetElement.style.display = "none" ;
}
</script> |
puis
| Code: |
<body onload="cacher()">
<a href="#" onMouseOver="javascript:visibilite('1');" target="_blank">lien1</a><br>
<a href="#" onMouseOver="javascript:visibilite('2');" target="_blank">lien2</a><br>
<a href="#" onMouseOver="javascript:visibilite('3');" target="_blank">lien3</a><br>
<div id="cacher">
<div id="divid1" ><table border=1><tr><td bgcolor=#FFFFFF width=200 height=200>**** CONTENU LIEN1 *****</td></tr></table></div>
<div id="divid2" ><table border=1><tr><td bgcolor=#FF0000 width=200 height=200>**** CONTENU LIEN2 *****</td></tr></table></div>
<div id="divid3" ><table border=1><tr><td bgcolor=#00FF00 width=200 height=200>**** CONTENU LIEN3 *****</td></tr></table></div>
</div>
</body> |
Apparemment ça fonctionne correctement. Je pense néanmoins que je n'ai pas optimisé la façon de faire. |
|
| |
|
|
tonguide
WRInaute passionné
Inscrit le: 28 Nov 2003
Messages: 979
|
| Posté le : Jeu Mar 27, 2008 14:49 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
Si je peux me permettre d'optimiser un peu ton code.
évite le "onload" dans le <body>
Fait plutôt comme ça :
| Code: |
| window.onload = cacher; |
après la définition de ta fonction
tu fais
| Code: |
| <a href="#" onMouseOver="javascript:visibilite('1');" target="_blank">lien1</a><br> |
Si il y a un traket blank, si tu clics, même si c'est pas le but, tu vas ouvrir une nouvelle fenêtre avec la même page, ce qui est un peu inutile. Donc retire au moins le target blank. Sinon j'ai tendance à mettre "javascript:void(0)" à la place de "#" pour ne pas remonter (t'façon, le JS est forcement activé si on veut que ça marche donc bon ...)
et
| Code: |
| <div id="divid1" ><table border=1><tr><td bgcolor=#FFFFFF width=200 height=200>**** CONTENU LIEN1 *****</td></tr></table></div> |
fait plutôt <div id="divid1" class="machin">CONTENU</div>
pour la taille fixe de 200*200, tu le mets dans div.machin {} et pour la couleur, dans #divid1 |
|
| |
|
|
seabird
WRInaute occasionnel
Inscrit le: 01 Déc 2003
Messages: 147
|
| Posté le : Jeu Mar 27, 2008 15:34 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
| tonguide a écrit: |
| Code: |
| <a href="#" onMouseOver="javascript:visibilite('1');" target="_blank">lien1</a><br> |
Si il y a un traket blank, si tu clics, même si c'est pas le but, tu vas ouvrir une nouvelle fenêtre avec la même page, ce qui est un peu inutile. Donc retire au moins le target blank. [code]
|
En fait dans le vrai code j'ai l'adresse du site externe à la place du #, d'ou le target blank. Dans le div ,il y a seulement, la description, une image, un avis ....
Merci pour la suggestion du window.onload. C'est corrigé en ce sens. |
|
| |
|
|
tonguide
WRInaute passionné
Inscrit le: 28 Nov 2003
Messages: 979
|
| Posté le : Jeu Mar 27, 2008 15:49 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
| seabird a écrit: |
| Dans le div ,il y a seulement, la description, une image, un avis .... . |
Raison de plus pour ne pas faire 3 tableaux pour juste ça  |
|
| |
|
|
seabird
WRInaute occasionnel
Inscrit le: 01 Déc 2003
Messages: 147
|
| Posté le : Jeu Mar 27, 2008 15:51 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
| tonguide a écrit: |
| seabird a écrit: |
| Dans le div ,il y a seulement, la description, une image, un avis .... . |
Raison de plus pour ne pas faire 3 tableaux pour juste ça |
exact je vais corriger |
|
| |
|
|
seabird
WRInaute occasionnel
Inscrit le: 01 Déc 2003
Messages: 147
|
| Posté le : Jeu Mar 27, 2008 16:50 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
Je voudrais éventuellement rajouter une petite option  .
Car ici à part au démarrage . Il y a toujours au moins une div de visible.
Je voudrais en fait masquer eventuellement la div visible, en cliquant par exemple sur un lien fermer situé dans le div et donc que toutes les div soient à nouveau invisibles.
Vous avez une idée de comment procéder ? |
|
| |
|
|
tonguide
WRInaute passionné
Inscrit le: 28 Nov 2003
Messages: 979
|
| Posté le : Jeu Mar 27, 2008 16:54 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
Tout simplement un lien
<a href="javascript:void(0)" onclick="cacher()">Fermer</div>
C'est à dire rappeler la fonction de démarre mais via un onclick plutôt qu'à partir d'onload. |
|
| |
|
|
seabird
WRInaute occasionnel
Inscrit le: 01 Déc 2003
Messages: 147
|
| Posté le : Jeu Mar 27, 2008 17:00 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
a autand pour moi , il suffit que je rajoute
| Code: |
| <a href="#" onclick="javascript:cacher();" >fermer</a> |
dans chaque div |
|
| |
|
|
seabird
WRInaute occasionnel
Inscrit le: 01 Déc 2003
Messages: 147
|
| Posté le : Jeu Mar 27, 2008 17:01 Sujet du message: Conséquences de l'emploi de <div display:none >... |
|
|
| tonguide a écrit: |
Tout simplement un lien
<a href="javascript:void(0)" onclick="cacher()">Fermer</div>
C'est à dire rappeler la fonction de démarre mais via un onclick plutôt qu'à partir d'onload. |
A on a répondu en meme temps |
|
| |
|
|
| |
|
|
