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
∞ infinity.


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

Feuille de personnage
ESSAIE:

code infobulle Empty
MessageSujet: code infobulle code infobulle EmptyDim 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
-
» [Hors-Sujet] Code lyoko
» ht-code
» WoW : Coming in November - Scourgewar
» [Lego] Catalogue LEGO de Noël 2009
» Flux RSS L'Equipe

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