Infobulles

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Infobulles

Message par Grimmy' le Mar 29 Nov 2011 - 18:36

Bonsoir,

J'aimerais pouvoir insérer des infobulles, non seulement sur la PA mais aussi dans les messages & dans le qui est en ligne. Donc j'aimerais avoir les codes a mettre dans le CSS pour faire ça. Ainsi que les codes des infobulles bien sur.

Mon problème est que je ne trouve pas grand chose pour m'aider sur le forum, il y a bien des sujets sur les infobulles mais je ne trouve pas ce que je cherche. J'aimerais aussi pouvoir mettre des url dans les infobulles sur la page d’accueil.

Merci d'avance.

ps ~ je ne sais pas si c'est la bonne section pour cette question mais bon.


Dernière édition par Grimmy' le Jeu 1 Déc 2011 - 17:47, édité 1 fois

Grimmy'
*

Féminin
Messages : 41
Inscrit(e) le : 24/11/2010

http://reinventeladestinee.forumactif.com/
Grimmy' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles

Message par Grimmy' le Mer 30 Nov 2011 - 18:48

Et hop petit UP'

Grimmy'
*

Féminin
Messages : 41
Inscrit(e) le : 24/11/2010

http://reinventeladestinee.forumactif.com/
Grimmy' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles

Message par Invité le Mer 30 Nov 2011 - 23:40

Bonsoir,

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.

Cordialement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles

Message par Grimmy' le Jeu 1 Déc 2011 - 17:47

Merci beaucoup j'ai réussis a faire ce que je voulais =)

Grimmy'
*

Féminin
Messages : 41
Inscrit(e) le : 24/11/2010

http://reinventeladestinee.forumactif.com/
Grimmy' a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum