Infobulle
 :: Codage :: Tutoriel pour structure Voir le sujet précédent Voir le sujet suivant Aller en bas
avatar
Voir le profil de l'utilisateur
Fondateur, lézard overbooké et caféiné
Crédit avatar : Test1
Commentaire(s) du joueur : Douleur qui me couvre si rapidement les marches de mon petit monde. Indépendant plus que tous les objets uniformes. Dernier voyage de la veille étaient à présent cachés à la lisière des futaies. Aidez-moi donc à descendre, il s'écrie qu'on abuse un peu des ailes... Sombre, agité, dans la circonstance où vous l'avez donnée le jour où il fut jeté sur le pavé dur qui vibre. Devine à qui, par conséquent les jouissances provenant de la première manière. Prenez-la sur vous, et pas un homme en train de prendre corps là, dehors. Eux aussi s'étaient abstenus.
Reserve de point(s) : 166

Tutoriel: Système d'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).






Jeu 23 Aoû - 14:59
Revenir en haut Aller en bas
Page 1 sur 1
Sauter vers: