11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je compte faire une page "plateforme" proposant un lien textuel vers chacun de mes 100 produits. Smiley smile

Ma priorité n° 1 est le référencement, ces 100 liens textuels doivent être entièrement accessibles aux moteurs de recherche.

Afin que cette page ne soit pas trop indigeste visuellement, j'intégrerais bien une infobulle jQuery montrant le produit lors du survol du lien, comme ici.

Quand je regarde le code du lien qu'il faut utiliser :
<a class="toolTip" title="Visiter markItUp!" href="http://markitup.jaysalvat.com" rel="thumbnail.png">Survolez ici !</a>

ça a l'air d'être du simple HTML avec une classe CSS, on dirait. Pas de JavaScript "onclick" etc dans le lien.

Est-ce que vous pensez que cet effet pourrait nuire au référencement ?

Merci beaucoup ! Smiley cligne
Hello,

Raté, il s'agit d'un plugin (c'est l'article qui correspond à la démo, et c'est bien évidemment à lire...) Jquery, donc c'est bel et bien du Javascipt (non intrusif, c'est la raison pour laquelle tu ne retrouve pas les "traditionnelles instructions" sur les liens )
Je ne vois, a priori, pas en quoi cela serait nuisible au référencement.
Concernant l'utilité, c'est à toi de voir, cela peut effectivement être un plus pour tes visiteurs (pouvoir visualiser rapidement le produit en question) mais cela peut également gêner "la lecture de ta page" ou incommoder le visiteur (cela dépendra de la manière dont tu déclenches l'infobulle (clic, survol ?) et de la présentation de cette liste de liens...)

S'il s'agit de montrer des produits, pourquoi ne pas mettre une miniature en image + un lien vers la page produit et éventuellement une infobulle descriptive, explicative, informative, si besoin est ?

Cdt,
Sylvain
Hello,

a écrit :
Est-ce que vous pensez que cet effet pourrait nuire au référencement ?


Pas de souci particulier pour le référencement à ma connaissance.
Effectivement, c'est du html, une librairie Js (jquery), un plugin JQuery (jquery.tooltip.js) et une feuille de styles (jquery.tooltips.css).


(pas mon jour Smiley smile grillé une fois de plus, et en mieux..)
Modifié par audrasjb (30 Jul 2010 - 14:04)
Merci beaucoup pour vos réponses rapides et ces explications !

Concernant l'intérêt des infobulles, personnellement j'en suis convaincu. Si l'on regarde par exemple n'importe quelle marque de voiture sur ce site : http://www.netcarshow.com/citroen/

Des vignettes suivent le curseur lors du survol d'un modèle. C'est ce que je compte faire, je ne trouve pas que ça gêne la lecture. Je trouve que ça apporte quelque chose là où des miniatures fixes alourdiraient la page.

J'avais pensé aussi à un comportement (image swap) qui afficherait uniquement l'image dont on survole le lien dans un cadre défini mais je trouve ça moins bien.

;)
atoo a écrit :
Merci beaucoup pour vos réponses rapides et ces explications !

De rien Smiley smile
atoo a écrit :
Concernant l'intérêt des infobulles, personnellement j'en suis convaincu. Si l'on regarde par exemple n'importe quelle marque de voiture sur ce site : http://www.netcarshow.com/citroen/
Des vignettes suivent le curseur lors du survol d'un modèle. C'est ce que je compte faire, je ne trouve pas que ça gêne la lecture. Je trouve que ça apporte quelque chose là où des miniatures fixes alourdiraient la page.

Ce qui me gêne (à titre tout à fait personnel Smiley lol ) d'une manière générale pour la technique utilisée et concernant le lien que tu cites en exemple, c'est que lors de l'affichage de cette infobulle au survol, je ne peux pas lire le contenu des liens qui sont masqués par cet affichage, que je ne peux pas accéder directement à l'information qui m'intéresse...
Je ne souhaite pas parcourir tous les liens, ni être obligé d'arrêter le survol (en sortant de cette liste) ni me décaller en bout de lien pour pouvoir reprendre ma lecture, en général, je me lasse assez vite et je vais voir ailleurs si je trouve mon bonheur Smiley ohwell

Mais ce n'est qu'un avis en passant Smiley cligne
Le JS est nécessaire pour positionner l'image en fonction de la position du curseur. En dehors de ça, c'est du CSS.
Ah ok, merci pour l'info McIntoc Smiley cligne

6I20 tu me mets le doute maintenant Smiley lol

Du coup, je sais plus trop quoi penser. Je trouve l'effet assez sympa, moderne et pas trop utilisé mais c'est vrai que quand ça affiche une image par-dessus le reste du texte c'est chiant....
Dans ce cas, essayes de limiter la zone de hover en dehors du texte (du coup, t'as plus besoin du JS pour obtenir la position du curseur pour savoir ou positionner l'infobulle).