PREMIER EXEMPLE DE COMMENTAIRES PAR EFFETS DE SURVOL

Exemple

lien 1 a a a a a a a a a lien 2 bbb bb bbb bbb bbb




CODE SOURCE CSS ET HTML

<html>
<head>
<style type="text/css">
a:hover {border-bottom: 0px}/* indispensable pour IE seulement */

a span {display:none ; /* cache les <span> placés dans un lien <a> */
text-decoration:none ; /* supprime le soulignement du texte <span> */
color:black} /* met le texte <span> en noir */

a:hover span {display: block; /* Montre le texte <span> lors du survol */
position: absolute; /* envoi le texte <span> dans 1 zone précise de l'écran */
top: 400px; /* cette zone se situe à 400 pixels du haut */
left: 200px ;} /* cette zone se situe à 200 pixels de la gauche*/

.boite {position: absolute; /* envoi 1 boite dans 1 zone précise de l'écran */
top: 390px; /* boite placée autour de l'affichage prévu du texte <span> */
left: 190px ; /* boite placée autour de l'affichage prévu du texte <span> */
width: 200px ; /* largeur en pixel de la boite */
height:50px ; /* largeur en pixel de la boite */
border: solid 2px black} /* bordure de la boite */
</style>
</head>

<body>

<div class="boite"></div> <!-- appel "boite" -->

<a href="#">lien 1<span> a a a a a a a a a</span></a> <!-- lien et son commentaire en survol -->
<a href="#">lien 2<span> bbb bb bbb bbb bbb</span></a> <!-- lien et son commentaire en survol -->

</body>
</html>

 

Pour tester ce script

 

COMMENTAIRES

Ce script cache un texte dans une balise <span> grace à un display:none. Un survol a:hover remplace display:none par display:block, c'est à dire fait afficher le contenu du <span>.

Reste à décider de la zone ou apparaîtra ce commentaire.

On peut utiliser ce script pour afficher des commentaires sur les photos d'une galerie, par exemple, mais aussi pour un menu.

Nota : attention position:absolute positionne à partir de la position de la boite "parent", pas à partir du haut de la page. Ici, la boite parent, c'est <a>. Cela peut entraîner des problèmes de positionnement dans certains cas.