Ce post vous est proposé par Bastien de l’agence Nexxpix, spécialiste de la création de site ModX

Illustration SelectrefBien 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 :

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.