Astuce CSS

Voici une petite astuce CSS, facile à mettre en oeuvre et qui peut être utile pour améliorer l'interactivité de votre site, lorsque vous y insérez des jeux ou de petites devinettes, comme dans la démonstration suivante, construite à partir de devinettes littéraires, proposées par des élèves de 3ème.

Démonstration

Mon premier est un cochon en anglais.
Mon second est un adjectif possessif.
Mon troisième règne sur les animaux.
Mon tout est un roi de Chypre qui tomba amoureux de la statue qu'il avait sculptée.

Je suis...

Je suis le nom d'une pierre précieuse et celui d'un professeur, chez Marcel Pagnol, à qui tout réussit depuis qu'il est devenu malhonnête.

Je suis...

Observe les mots aimer et Marie et tu m'auras trouvé.

Je suis...

Survolez les pointillés pour découvrir les mots manquants :

"Que diable allait-il faire dans cette ..... ?"
"Il pleure sur mon coeur, comme il pleut sur la ......"
O bruit doux de la ..... par terre et sur les toits".

Le code commenté

<span onmouseover="this.innerHTML='texte qui apparaît sous la souris'"; onmouseout="this.innerHTML='texte qui apparaît après le passage de la souris'" style="cursor: help; font-weight: bold;">
texte par défaut : survolez-moi
</span>

onmouseover="this.innerHTML='...'" correspond au texte qui apparaîtra au passage de la souris.
onmouseout="this.innerHTML='...'" correspond au texte qui apparaîtra après le passage de la souris.
Entre les balises <span>...</span>, on note le texte qui apparaît par défaut.
On peut remplacer les balises <span>...</span> par d'autres balises <h3>...</h3>, <div>....</div>, etc.
Si l'un des textes à saisir contient une apostrophe, il faut la précéder d'un antislash (ex : c\'est l\'heure)
On peut ajouter d'autres attributs CSS dans la balise style, par exemple style="text-align: center; color: red; text-transform: uppercase;" pour obtenir un texte centré, écrit en lettres capitales et en rouge.

Saute-Mouton - http://realia.free.fr/sautemouton_avril/newsprt.php?lng=fr&pg=1788 - [Version PDF]