• Firefox 3.1 avec TraceMonkey : 2144 ms
• Firefox 3.1 sans TraceMonkey : 3470 ms
• Opera 9.60 : 5876 ms
• Internet Explorer 8 : 9013 ms
• Chrome : 2117 ms
• Safari avec Webkit r36712 : 1817 ms

A noter que le nouveau navigateur de Google, Chrome, monté sur Webkit s’en tire plutôt pas mal !

On va créer tout d’abord 2 div contenant 2 textes à alterner avec un CSS element.style.display différent.

<div id=”mod_1″ style=”display: block;”> BONJOUR </div>

<div id=”mod_2″ style=”display: none;”> AU REVOIR </div>

Explication : element.style.display ne retourne une valeur que si l’élément a un attribut HTML style avec propriété CSS display renseignée, donc dans notre cas, la DIV avec l’id mod_1 sera affichée au chargement de la page tandis que mod_2 sera cachée.
Il nous faut un lien pour pouvoir alterner entre les 2 div.

<a onclick=”alterner(‘mod_1′,’mod_2′);” title=”Alterner les 2 div”>Alterner</a>

Il nous manque plus que le Javascript :

<script type=”text/javascript”>
function alterner(obj1, obj2){
var obj1 = document.getElementById(obj1);
var obj2 = document.getElementById(obj2);
obj1.style.display = (obj1.style.display == “block”) ? “none” : “block”;
obj2.style.display = (obj2.style.display == “block”) ? “none” : “block”;
}
</script>

Que va faire le script ? Si la DIV mod_1 (obj1 la fonction javascript) est à display:block (affichée) alors on définit la DIV mod_2 à display:none (cachée) et inversement.

Voici un exemple en cliquant sur le lien “Alterner les DIV” :
Alterner les DIV

BONJOUR

AU REVOIR

- Refonte graphique de mon site CV Freelance. Voir la précédente version.

- Développement d’une page de démarrage personnalisable. Cliquez pour voir l’explication

- Administrateur du Site/Blog Tuxboard.com.
Plus de 30.000 visiteurs quotidien. Consultez les statistiques en détails de mon blog.
Design CSS, développement PHP/MySQL, retouche Photoshop et administration Linux (Debian).
Disponible à cette adresse.

- Développement du site Wanimo.com.
Design CSS, développement PHP(Objet)/MySQL, retouche Photoshop.
Disponible à cette adresse.

- Création du site Cronos
Découpe Photoshop, intégration graphique, design CSS, développement PHP.

- Développement de modules pour un forum de poker : Lyonholdem.com
Création de module greffés au forum de discussion et au backoffice.
Disponible à cette adresse.

- Développement d’une boutique en ligne simplifiée (Paiement par Paypal/CB).
Possibilité d’upgrader en boutique en ligne avec paiement en ligne CB.
Disponible à cette adresse.