Ce post vous est proposé par Bastien de l’agence Nexxpix, spécialiste de la création de site ModX
Bien qu’utilisé initialement dans le cadre d’un formulaire html, l’élément SELECT est régulièrement contourné par les webmasters pour proposer un accès rapide à d’autres pages ou d’autres sites Internet (liste de fournisseur, blogroll, listing de références, etc.).
Pratique, la liste déroulante html SELECT permet de réaliser un listing d’éléments sans pour autant changer les habitudes des utilisateurs puisque chaque navigateur a sa manière de présenter cet objet.
Même si son contenu textuel peut être pris en compte au sein d’une même page, les liens, souvent présents dans l’attribut « value » ne sont malheureusement pas suivis comme il le faudrait par les robots des moteurs de recherche.
Afin de palier ce problème tout en respectant le confort des utilisateurs, je vous présente un petit javascript permettant de joindre l’utile à l’agréable.
Le principe est simple :
Un appel du javascript dans le code source :
<script type= »text/javascript » language= »javascript » src= »selectref.js »></script>
Un listing sous forme UL / LI, par exemple, la blogofriends de ce blog (oui, il y a un site en plus, j’en profite pour faire discrètement ma publicité 😛 ), avec l’id qui va bien :
<ul id= »selectref »>
<li><a href= »http://www.leblogduwebmaster.com/ »>Acidifié</a></li>
<li><a href= »http://blog.himselfprod.com »>Blog référencement</a></li>
<li><a href= »http://blogopub.tv »>Blogopub</a></li>
<li><a href= »http://www.ajblog.fr »>Création et formation – AJblog</a></li>
<li><a href= »http://ecoms.fr/blog »>Ecoms Consulting</a></li>
<li><a href= »http://www.outil-referencement.com »>Outil Référencement</a></li>
<li><a href= »http://www.snipeo.fr »>Snipeo, trafic ciblé</a></li>
<li><a href= »http://www.seoplayer.com/ »>Stratégies de visibilité</a></li>
<li><a href= »http://www.nexxpix.fr/ »>Création site modx</a></li>
</ul>
Et pour finir, en fin de code source (juste avant </html>), on appelle la fonction avec pour paramètres, l’id qui va bien et un petit titre pour s’y retrouver (il est possible d’en utiliser plusieurs sur une même page) :
<script type= »text/javascript » language= »javascript »>
var select01 = new selectRef.init(‘selectref’, ‘Blogfriends’);
</script>
Voici ce que donne le listing donné en exemple :
- Acidifié
- Blog référencement
- Blogopub
- Création et formation – AJblog
- Ecoms Consulting
- Outil Référencement
- Snipeo, trafic ciblé
- Stratégies de visibilité
- Création site modx
Pour télécharger le javascript avec une petite démo, c’est ici.
Edit du 02 Février 2010 :
Suite aux retours de JeanMOULIN54, des modifications ont été apportées :
– Ajout d’une option de Target lors de l’appel de la fonction où vous pouvez définir celui qui vous intéresse (_self, _parent, etc.) avec par défaut : _blank
– Prise en charge de IE 8
Pour appeler la fonction :
<script type= »text/javascript » language= »javascript »>
var select01 = new selectRef.init(‘selectref’, ‘Blogfriends’,’_self’);
</script>
La nouvelle version, toujours avec une petite démo, est téléchargeable ici
Les tests revenus pour les OS et navigateurs :
Windows 7 :
IE 8 : Ok
IE 7 : Ok
FF 3.6 : Ok
Chrome 4 : Ok
Opéra 10.10 : Ok
N’hésitez pas à faire part de vos tests en commentaire, je mettrai à jour.
J’utilise ce principe depuis 2 ans, c’est la meilleure implémentation possible (tu pourrais même externaliser le lancement de la fonction et utiliser un gestionnaire d’événement pour y faire appel au chargement de la page).
Elle permet d’améliorer l’expérience utilisateur en fonction des possibilités de son navigateur au-delà de rendre accessibles (et indexables) les ressources liées.
Ce déploiement peut être vu sur .
Adicifié est en parking ?
@Nico merci de l’exemple 🙂
@Julien : oui il semble qu’acidié soit en parking, c’est bizarre, je vais me renseigner
Adicié oui pardon, à chaque fois je pense à l’acid avec le nom de son site 😀
Ah non je me suis plantée c’est Acidifié 😀
Google est-il capable de suivre de tels liens ?
Google suit les ancres (liens), donc oui (ce qui n’est pas forcément le cas du select qui est un élément de sélection et non de navigation).
Excellente idée ! merci.
Ce type de listes déroulantes me semble utile lors d’un rappel de liens navigationnels, mais je ne l’utiliserais pas en premier pour les liens du menu par souci d’ergonomie, d’accessibilité et tout simplement de … simplicité, tous les liens n’étant pas visible d’un seul coup d’oeil et les internautes pressés !.
@Oscar : c’est exactement la problématique qui a initiée ce petit outil : réaliser des quick links qui puissent être référencés. La fait d’utiliser un select sans style permettra à chaque webmaster d’appliquer ses css tout en restant adapté au navigateur de chaque utilisateur. Il est tout à fait possible de le faire des quick links beaucoup plus ergonomiques avec css mais dans ce cas là, le javascript s’avère peu utilise. En modifiant légèrement le javascript, il est possible de l’utiliser dans le cadre de formulaires normaux.
Bonjour à tous, j’utilise ce script sur mon site mais je cherche désespérément à imposer un width à mon select, si quelqu’un a une idée, merci d’avance
@eda : Est-ce que tu peux nous donner l’adresse de la page où tu utilise le script ?
Voila la page :
http://www.camping-enfrance.com/index.php
@eda :
Pourrais-tu essayer de mettre en feuille de style :
#site_tour{width:345px;}
Et me dire ce que ça donne ?
Merci
Merci de ton aide Bastien,
je le place où ?
Pour faire rapide, insère le code suivant :
#site_tour{width:345px;}
Dans le code source de ta page juste avant la balise
Est-ce que ça fonctionne comme ceci ?
tu vas peut etre me paraitre neuneu mais de quelle balise parles tu, merci
Arf, zut, les balises HTML ne passe pas dans le poste.
Alors, je vais essayer comme ceci :
Insère :
<style>
#site_tour{width:345px;}
</style>
Dans le code source de ta page juste avant la balise </head> de ta page html
Est-ce que ça fonctionne comme ceci ?
Ca marche super.
T’es mon héros, tu m’as évité de me rendre chauve.
MERCI
Oh! Ça me fait rougir… 🙂
Merci pour cette jolie petite liste ! Possibilité de lancer les liens dans la même page ? Car là ça lance forcément sur une nouvelle page web …
Merci
Bonjour,
Oui, pas de problème, il suffit de changer la ligne 31 du Javascript.
Remplacer :
else{bsel.setAttribute(« onchange », « if(this.value != \’\’){window.open(this.value)}; »);}
Par :
else{bsel.setAttribute(« onchange », « if(this.value != \’\’){window.open(this.value, ‘_self’)}; »);}
Je vous souhaites une bonne continuation,
Bastien
Merci, cela fonctionne parfaitement sous Firefox, mais sous IE pas moyen de faire fonctionner les liens … même si test avec les fichier d’origine, les liens ne veulent pas s’ouvrir … ( je charge des pages du style : Produits
Merci Bastien 😉
* je charge des pages du style /marques/XX/produit-html
Bonjour,
Effectivement, je ne connaissais pas ce problème.
Je vais m’y pencher dessus dans la semaine et ferais un mise à jour complète du javascript.
Bastien
Merci beaucoup 😉
As tu trouver une solution pour faire fonctionner la liste sous Internet Explorer ?
Merci 😉
Bonjour,
Malheureusement, je n’ai pas encore pris le temps de m’y pencher dessus.
En passant par un framework ajax (type jquery) ça serait rapide à faire mais j’aimerai encore garder un peu d’indépendance pour ce petit script.
Dès que j’ai une solution fonctionnelle (car des moments, ça tourne pas trop mal sur une version de IE mais pas sur les autres) je fait une mise à jour du zip.
Encore merci pour votre patience.
Bastien
Salut Bastien, as-tu réussi à faire fonctionner ta liste sous IE ?
Salut,
Je viens de poster un édit avec une mise à jour du javascript. J’en ai profité au passage pour une petite amélioration.
En espérant qu’il fonctionne comme vous le souhaitez.
Bonne continuation,
Bastien
Merci à toi, ça fonctionne parfaitement maintenant 🙂
Par contre je n’ai toujours pas réussi à faire fonctionner le Javascript pour que le lien s’ouvre dans la même fenêtre et non dans une nouvelle …
Merci à toi, c’est du bon boulot 😉
Bonjour,
Je l’ai inclus directement dans le JavaScript pour le target du lien.
Il suffit de rajouter un paramètre à l’appel du JavaScript.
Pour une ouverture dans la même fenêtre, ça se passe comme ceci :
<script type= »text/javascript » language= »javascript »>
var select01 = new selectRef.init(’selectref’, ‘Blogfriends’,’_SLEF’);
</script>
N’hésitez pas également à me faire des retours sur les OS/Navigateur pour lesquels le script fonctionne afin que je mette à jour le post.
Bonne journée,
Bastien
Merci Bastien de ton aide, alors j’ai édité le fichier html et j’ai mis le paramètre comme ceci :
var select01 = new selectRef.init(‘selectref’, ‘Blogfriends’,’_SLEF’);
Mais ça ne change rien, les liens s’ouvrent toujours dans de nouvelles fenêtres …
Bonjour,
Pouvez-vous m’en dire plus ? Os que vous utiliser, Navigateur, éventuellement page de test consultable ?
Là, sauf si vous n’avez pas mis à jour le javascript, je peux difficilement voir d’où peut provenir le problème.
Bastien
Bon,
Après tests et discussions, il s’avère qu’IE est sensible à la casse.
Pour faire l’appel javascript, il faut mettre les destinations en muinuscules : _blank, _self, _parent, etc.
J’ai mis à jour le fichier .zip
Bonne continuation,
Bastien
Bonjour,
Que peut-on faire de faux pour que le script ne fonctionne pas sour IE?
J’ai téléchargé le dernier script, il fonctionne sur tout les navigateurs que j’ai pu essayer, sauf sous IE…
Voici un exemple (il s’agit du menu « Jump to image: » qui se trouve sous le calendrier):
http://www2.snowfactory.com/portal/modules.php?name=WebCAM&file=index&l_op=history&idh=156717&m=3&y=2010&fn=&ln=&vision=day&pub=0&ajax=1&webcam=Belalp#history
Merci pour votre aide.
Bonsoir Thomas,
J’ai essayé de vous joindre il y a quelques jours par email afin d’identifier avec vous les problèmes liés à l’utilisation du script.
N’hésitez pas à revenir vers moi.
Bastien
Heureusement que Tiger m’a refilé l’adresse de ce billet je l’avais complètement zappé et j’avais justement besoin d’un tel script. Alors merci, tout simplement 😉
Merci beaucoup pour cette astuce qui fonctionne également sous Mac OS 10.6.4 avec FF 3.6.8.
L’utiliser pour un rappel de liens sur la page est très utile.
Mais je ne l’utiliserais sans doute jamais sur un menu principal.
C’est pas terrible.
Merci infiniment pour cette solution, je vais pouvoir dormir tranquille !
@tai-nui : Merci pour cette précision.
@marc : Oui, ça reste un outil basé sur la mise en page par défaut du navigateur. Avec un peu de css, il est possible de le rendre plus sympa. Une version totalement personnalisable (mais du coup n’utilisant plus la balise select est en test depuis un petit moment. Je finirais bien par m’occuper de la publier.
@db : Merci de l’utiliser, je suis content de voir que ce petit outil plait 🙂
Bonjour
Je viens de découvrir ce système de liens qui me convient parfaitement.
Par contre ça marche sous Chrome et Firefox mais sous IE8, les liens ne fonctionnent pas. J’ai bien pris le second script.
Je ne comprends pas
Ma page est en php…
en fait j’ai fait une page test ici
J’ai résolu mon souci
Pour ceux que ça intéresse, je n’avais pas de DOCTYPE spécifié au début de mes pages.
J’ai cherché une journée pour cette bêtise. Vive l’info
Merci pour le code
Bonjour
Tout fonctionne bien sur chrome 8 , firefox 6, IE8 mais malheureusement pas avec IE7 qui représente encore 10% des visites du site.
Y aurait-il une petite modification à réaliser pour assurer la compatibilité avec IE7
merci
Bonjour,
je viens de tester ce script avec mes pages php qui le génère en echo, il fonctionne super bien mais j’ai un bug sous ie8 (avec ie tester tout fonctionne je comprends pas trop mais bon) en fait les ul li sont transformé en select option mais avec un soucis :
Alors que sous les autres navigateurs, j’ai bien les infos de mes liens à la place de [object].
J’ai tenté le changement de doctype mais rien n’y fait.
Une piste pour trouver la solution ?
Vu que c’est pas passé dans le dernier post voilà une capture du code une fois interprété par ie :
http://minus.com/lkPClc
Pareil, j’ai un petit bug sous IE8…
Pingback: Référencement et menu déroulant compatible FireFox 6, Chrome, IE 9 | Blog référencement seulmaitreabord.info