Infobulle

Html & CSS
Niveau: Facile
Exemple: Clik'
Compatibilité: Firefox - Chrome - Opera - Safari(?) - IE (?)

Oyé Oyé!!!
Voici une astuce bien connu maintenant mais qui revient souvent comme question au sein du forum, de plus aucun tutoriel n'a été poster dessus si j'ai bien regarder ^^", donc le voila ce petit tutoriel sur le système d'infobulle.

L'infobulle permet de conserver une partie de texte/image ou autre dans une "bulle", celle-ci apparaît quand on passe la souris sur une image ou bien un texte, ici je vous expliquerait le système par image (voir exemple plus haut), beaucoup on utilisé le système par texte/lien mais il reste déconseiller.

Le principe reste donc simple, il vous suffit de mettre une image dans votre page d'accueil (l'infobulle étant souvent utilisé dans cet partie) comme ceci:

Code:

<img src="Adresse de l'image">

Bref rien de bien compliquer maintenant on va placer le texte ou l'image qui apparaîtra quand on survolera la première image:

Code:

<img src="Adresse de l'image"><span> Texte dans l'infobulle</span>

Et vient ensuite la division qui encadrera le tout pour que l'infobulle fonctionne correctement avec le css qui suit mais qu'on verra après x).

Code:

<div class="infobulle"><img src="Adresse de l'image"><span> Texte dans l'infobulle</span></div>

La partie html est terminer on va donc passer à la seconde partie qui est tout aussi importante, le CSS.

Dirigez-vous dans votre panneau d'administration vers Affichage -> Couleur -> Onglet | Feuille de style CSS, et commencer par coller le premier morceau de code qui consistera à cacher l'infobulle quand la souris ne passe pas sur l'image:

Code:

.infobulle span
{                       
    position : absolute;
    top : auto;
    left : auto;
    width : 136px;
    height : 136px;
    background-color: #9C7049;
    display : none;
}

position: absolue -> Permet de positionner l'infobulle par rapport au coin en haut à gauche.
top -> Position par rapport au haut
left -> Position par rapport à gauche
width -> Largeur de l'infobulle
height -> hauteur de l'infobulle
overflow -> hidden -> l'infobulle sera cacher si elle dépasser la heuteur et la largeur définie par height et width,

L'hauteur et la largeur est petite étant donner qu'on ne veut pas voir apparaître l'infobulle sans qu'on passe la souris, donc cette partie n'est pas à modifier.
Maintenant on passe au dernier bout de code CSS qui fera apparaitre l'infobulle:

Code:

.infobulle:hover span{
    display:block;
    top        :  auto;
    left      :  auto;
    width      :  136px;
    height    : 136px;
    overflow  :  visible;
    background-color: #9C7049;
}

Les quatre premières valeur signifie la même chose qu'au premier mais il faudra les modifier pour positionner l'infobulle et lui donner une hauteur et une largeur.
overflow: visible -> Comme c'est marquer l'élément sera visible au passage de la souris.
background-color -> C'est la couleur de fond de l'infobulle tout simplement.

Penser à tout bien valider et vous avez votre infobulle, je vous laisse au passage cet petite page -> Ici qui contient la plupart des propriété css sa peut toujours servir quand on à un trou de mémoire (fin moi sa m'aide bien x).