Conséquences de l'emploi de <div display:none >...

[seabird]

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: Tout sélectionner

<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: Tout sélectionner

<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]

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]

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]

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]

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]

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]

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: Tout sélectionner

<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: Tout sélectionner

<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]

Si je peux me permettre d'optimiser un peu ton code.

évite le "onload" dans le <body>
Fait plutôt comme ça :

Code: Tout sélectionner

window.onload = cacher;

après la définition de ta fonction

tu fais

Code: Tout sélectionner

<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: Tout sélectionner

<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]

Code: Tout sélectionner

<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]

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]

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]

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]

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]

a autand pour moi , il suffit que je rajoute

Code: Tout sélectionner

<a href="#" onclick="javascript:cacher();" >fermer</a>

dans chaque div

[seabird]

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