AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  Connexion  

code infobulle

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
Voir le profil de l'utilisateur http://infinity-source.forumactif.org
avatar


∞ infinity.
Admin
Messages : 108
Date d'inscription : 11/08/2013

Feuille de personnage
ESSAIE:

MessageSujet: code infobulle Dim 18 Aoû - 12:48

Une infobulle est constituée d'un code HTML, et d'un code CSS associé.

Le code HTML (message d'accueil, messages, QEEL):

Code:
<div class="infobulle"><img src="lien image ou apparait l'infobulle">
<span>Contenu de la bulle</span></div>

Le code CSS ( panneau d'amdin' > affichage > couleur > feuille de style CSS) :

Code:
.infobulle{position: relative;z-index: 0;}
 
.infobulle:hover{background-color: transparent;z-index: 50;}
 
.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
 
.infobulle span img{
border: 1px;
padding: 5px;}
 
.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 150px ;
color:#FFFFFF;
border: 1px solid #000;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

La partie à personnaliser est la suivante:

Code:
.infobulle:hover span{
visibility: visible;
top: 70px;/*position par rapport au haut de l'image*/
left: 35px;/*position par rapport au bord gauche de l'image*/
width: 150px ;/*largeur de la bulle*/
color:#FFFFFF;/*couleur du texte*/
border: 1px solid #000;/*épaisseurs style et couleur des contours*/
-moz-border-radius: 12px;/*arrondis*/
-webkit-border-radius: 12px;/*arrondis*/
border-radius: 12px;/*arrondis*/}
Pour aligner plusieurs infobulles, placez-les dans un tableau. Exemple pour un ligne de 3 infobulles:

Code:
<table><tr><td><div class="infobulle"><img src="lien image ou apparait l'infobulle 1">
<span>Contenu de la bulle 1</span></div><div class="infobulle"><img src="lien image ou apparait l'infobulle 2">
<span>Contenu de la bulle 2</span></div></td><td></td><td><div class="infobulle"><img src="lien image ou apparait l'infobulle 3">
<span>Contenu de la bulle 3</span></div></td></tr></table>

Pour le QEEL, il faudra insérer la partie HTML directement dans le template Index_body. Et si vous souhaitez plusieurs sortes d'infobulles, il va falloir jouer avec les noms des class.
Revenir en haut Aller en bas
code infobulle
Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1
Sujets similaires
-
» Livre III : Du Code Pénal
» [Hors-Sujet] Code lyoko
» [Code militaire] Titre II : De la hiérarchie et de la discipline
» Le Code Chastenay (15/02/11)
» Casse tête code secret

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Infinity Source :: LE GUIDE UNIVERSITAIRE :: CODAGES-
Sauter vers: