Javascript : Faites clignoter un élément

Gerald Lonlas — Thu, 07 Feb 2008 17:37:00 +0100

Une demande qui m’a été faite, était de faire clignoter un élément sur une page web.

Bien entendu la balise <blink> existe mais elle n’est pas prise en compte par tous les navigateurs. Je me suis donc penché sur une fonction Javascript utilisant les effets visuels de script.aculo.us.

Je vous présente ma fonction Blink() qui permet de faire clignoter presque n’importe quel élément sur votre page

Par défaut elle s’applique sur les balises : <div>, <p>, <a>, mais fonctionne aussi sur tous les autres éléments HTML présents sur une page (Modification de la fonction Blink() obligatoire).

Démo

Voici un exemple de la fonction sur un bloc DIV.

Utilisation

Téléchargez l’archive contenant la fonction Blink, Prototype, Scrip.aculo.us
Placez les fichiers dans un dossier de votre site (par exemple : /js/)
Insérez les balises suivantes dans le Head de votre page.

<script type="text/javascript" src="http://blog.dreaminvasion.com/post/js/prototype.js"></script>
<script type="text/javascript" src="http://blog.dreaminvasion.com/post/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://blog.dreaminvasion.com/post/js/blink.js"></script>

Maintenant ajoutez l’attribut rel=’’blink’’ aux éléments à faire clignoter

<div rel="blink">
<h1>Texte qui clignote</h1>
<img src="http://blog.dreaminvasion.com/post/blink.jpg" alt="Image qui clignote" title="Image qui clignote" />
</div>

Pour ceux qui le remarqueront l’utilisation de l’attribut rel sur des balises comme DIV, P, … n'est pas reconnu comme valide.

Aussi si vous avez une solution je suis preneur et je modifierais ce script.

Blog Dreaminvasion - développement et administration réseaux - blink

Javascript : Faites clignoter un élément

Démo

Utilisation