Pause-Choco

Récemment le charismatique gourou de TLK me demandait comment faire clignoter du texte dans une page HTML. Les vieux routards du Web connaissent sûrement la balise <blink> de Netscape 4, fonctionnant toujours dans Firefox. Mais elle n'est pas standard W3C et ne fonctionne pas dans le vétuste Internet Explorer®.

Heureusement la norme issue du W3C met à disposition le style text-decoration: blink qui répond à ce besoin, mais comme on pouvait s'en douter ce style ne fonctionne pas sur l'archaïque Internet Explorer® ! Donc nous voilà obligé de coder cela en JavaScript...

Pour nos besoins j'ai réservé la classe clignote, ainsi tous les textes d'une page pris entre les balises appliquant cette classe clignote clignoteront (exemple :<p class="clignote">texte clignotant</p>).

<script type="text/javascript">
var temps = 60;
var etat = 0;
var aClignote = new Array();

// fonction d'initialisaton qui recupere tous les styles 
// des classes «clignote»
// à appeler par la fonction « onload="init();" »
function init () {
	//Si la fonction « getElementsByTagName() » n'est pas supportée
	// ce n'est pas la peine d'aller plus loin !
	if (document.getElementsByTagName) {
		aClignote = retourne_classes ("clignote"); 
		boucle ();
	}
}

// routine exécutée en boucle qui change l'état des styles
// « visibility » entre « hidden » et « visible »
function boucle () {
	if (etat){
		for (i = 0; i < aClignote.length; i++)
			aClignote[i].visibility = "hidden";
		etat = 0;
		temps = 200;
	} else { 
		for (i = 0; i < aClignote.length; i++)
			aClignote[i].visibility = "visible";
		etat = 1;
		temps = 900;
	}
	setTimeout("boucle()",temps);
}

// fonction qui retourne tous les styles du classe donnée
function retourne_classes (nom_classe) {
	var j = 0;
	var a_resultats = new Array ();
	var aBalises = document.getElementsByTagName ("*"); 
	for (i = 0; i < aBalises.length; i++) {
		if (aBalises[i].className == nom_classe) { 
			a_resultats[j++] = aBalises[i].style;
		}
	}
	return a_resultats;
}
</script>

Un exemple est disponible sur ce site. Attention les yeux :-)