Cet exemple simplifié présente le menu de sélection de langue du site Web d'une organisation internationale :

A partir de cet exemple, nous avons produit une version similaire prise en charge sur les connexions lentes :

Dans la version originale, deux images sont utilisées pour chaque langue. Lorsqu'un utilisateur place le pointeur de sa souris au-dessus d'une image, un événement est détecté dans JavaScript et l'image se transforme. Une autre image est utilisée pour les séparateurs orange.

Le code JavaScript est le suivant :

langIndexes = new Array('en','fr','es');
langImagesOver = new Array();
langImagesOut = new Array();

for( i = 0; i < langIndexes.length; i++ ) {
  langImagesOver[langIndexes[i]] = new Image();
  langImagesOver[langIndexes[i]].src = langIndexes[i] + '_over.gif';
  langImagesOut[langIndexes[i]] = new Image();
  langImagesOut[langIndexes[i]].src = langIndexes[i] + '_off.gif';
 }

function swap(langCode,langStatus){
  if( langStatus ) {
    document.images[langCode].src = langImagesOver[langCode].src;
  }
  else {
    document.images[langCode].src = langImagesOut[langCode].src;
  }
}

Le contenu HTML est le suivant :

<div class="language">
<a href="#en" onmouseover="swap('en',1)" onmouseout="swap('en',0)">
<img src="en_off.gif" alt="English" title="English" name="en" width="67" height="20">
</a>
<img src="orange_divider.gif" width="1" height="20" alt="">
<a href="#fr" onmouseover="swap('fr',1)" onmouseout="swap('fr',0)">
<img src="fr_off.gif" alt="French" title="French" name="fr" width="73" height="20">
</a>
<img src="orange_divider.gif" width="1" height="20" alt="">
<a href="#es" onmouseover="swap('es',1)" onmouseout="swap('es',0)">
<img src="es_off.gif" alt="Spanish" title="Spanish" name="es" width="71" height="20">
</a>
</div>

Le contenu CSS est le suivant :

body { 
padding:0;
margin:0;
}

div.language { 
background-color: black;
float:left;
line-height: 65%;
}

img { 
border: 0;
}

Vous pouvez simplifier le contenu HTML en redéfinissant les liens sous forme de liste horizontale :

<ul class="language">
<li><a href="#en" title="English">English</a>
<li><a href="#fr" title="French">Français</a>
<li class="end"><a href="#es" title="Spanish">Español</a>
</ul>

Vous pouvez ensuite définir l'effet de substitution à l'aide de la pseudo-classe :hover dans le contenu CSS afin d'éviter d'avoir recours au JavaScript. Pour insérer des séparateurs orange, il vous suffit alors d'ajouter une bordure à droite de chacun des éléments centraux de la liste. Plus aucune image n'est alors utilisée.

body { 
padding:0;
margin:0;
font-family:Helvetica,Verdana,Arial,sans-serif;
font-weight:bold;
font-size:70%;
}

ul.language {
background-color:black;
float:left;
margin:0;
padding:6px 4px;
list-style-type:none;
}

.language li {
display:inline;
border-right: 1px solid #cc6600;
line-height: 70%;
margin:0;
padding:0px 12px;
}

.language li.end { 
border: none;
}

a {
color: white; 
text-decoration: none;
}

a:hover {
color: #bbd6ef;
}

Le résultat obtenu dépend des polices disponibles. L'avantage de cette technique est qu'elle permet d'utiliser la même police que celle utilisée dans le reste de la page. En outre, le texte est mis à l'échelle conformément à la taille de police définie dans le navigateur de l'utilisateur.

Cette méthode permet de réduire la taille globale des contenus HTML, JavaScript et CSS (1338 à 630 octets, soit une réduction de plus de 50 %). La plupart des données sont définies sous forme de contenu CSS et peuvent donc être mises en cache. Aucune donnée JavaScript n'est utilisée. La suppression des images permet également d'éviter l'envoi de 3 à 6 demandes HTTP et de réduire la taille du contenu de 1 050 à 2 100 octets.