Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Code infobulle

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

Résolu Code infobulle

Message par Etoile du tonnerre le Lun 7 Mar 2011 - 16:29

Bonjours,
J'aimerai qu'une image et du texte apparaisse dans un petit carré quand on survol une autre image avec la souris.
Exemple

Voici mon code:
Code:
<a class="infobulle"><img src="http://i67.servimg.com/u/f67/14/47/99/84/acueil10.jpg">
<span><font color="#ffffff">~ Etoile du Tonnerre ~<br>
~ Chef du Clan du Tonnerre ~<br></font>
<br><img src="http://i67.servimg.com/u/f67/14/47/99/84/jhjkh11.jpg"><br><br> Fondatrice Joyeuse et Active<br></span></a><div><a href="#" class="infobulle"></a><a href="http://xx-laguerredesclans.forums-actifs.com/u1" target="_blank">Profil</a> . <a href="http://xx-laguerredesclans.forums-actifs.com/privmsg?mode=post&u=1" target="_blank">Mp</a></div>

<br><br>
<a href="#" class="infobulle"><img src="http://i60.servimg.com/u/f60/13/30/78/87/staff210.jpg">
<span> <font color="#ffffff">~ Feuille Rousse ~<br>
~ Lieutenante de L'Ombre ~<br></font>
<br><img src="http://i67.servimg.com/u/f67/14/47/99/84/chat_p10.jpg"><br><br>
Lieutenante sadique et présente<br></span></a><div><a href="#" class="infobulle"></a><a href="http://xx-laguerredesclans.forums-actifs.com/u4" target="_blank">Profil</a> . <a href="http://xx-laguerredesclans.forums-actifs.com/privmsg?mode=post&u=4" target="_blank">Mp</a></div>
<br>
<a href="#" class="infobulle"><img src="http://i60.servimg.com/u/f60/13/30/78/87/staff311.jpg">
<span><font color="#ffffff">~ Coeur de Flamme ~<br>
~ Lieutenante du Tonnerre ~<br></font>
<br><img src="http://i67.servimg.com/u/f67/14/47/99/84/chat_310.jpg "><br><br>
Lieutenant vif et jolie<br></span></a><div><a href="#" class="infobulle"></a><a href="http://xx-laguerredesclans.forums-actifs.com/u7" target="_blank">Profil</a> . <a href="http://xx-laguerredesclans.forums-actifs.com/privmsg?mode=post&u=7" target="_blank">Mp</a></div>
<br>
<a href="#" class="infobulle"><img src="http://i60.servimg.com/u/f60/13/30/78/87/staff611.jpg">
<span><font color="#ffffff">~ Etoile Filante ~<br>
~ Chef du Clan du Vent ~<br></font>
<br><img src="http://i67.servimg.com/u/f67/14/47/99/84/images14.jpg"><br><br>
Modo discret<br></span></a><div><a href="#" class="infobulle"></a><a href="http://xx-laguerredesclans.forums-actifs.com/u5" target="_blank">Profil</a> . <a href="http://xx-laguerredesclans.forums-actifs.com/privmsg?mode=post&u=5 " target="_blank">Mp</a></div>
<br>
<a href="#" class="infobulle"><img src="http://i67.servimg.com/u/f67/14/47/99/84/chats-10.jpg">
<span><font color="#ffffff">~ Etoile de Neige ~<br>
~ Chef du Clan de la Rivière ~<br></font>
<br><img src="http://i67.servimg.com/u/f67/14/47/99/84/staff311.jpg"><br><br>
Modette très paresseuse <br></span></a><div><a href="#" class="infobulle"></a><a href="http://xx-laguerredesclans.forums-actifs.com/u3 " target="_blank">Profil</a> . <a href="http://xx-laguerredesclans.forums-actifs.com/privmsg?mode=post&u=3 " target="_blank">Mp</a></div>
<br>
<a href="#" class="infobulle"><img src="http://i67.servimg.com/u/f67/14/47/99/84/staff710.jpg">
<span> <font color="#ffffff">~ Etoile Noire ~<br>
~ Anciens chef qui fait parti du Clan des Etoiles ~<br></font>
<br><img src="http://i67.servimg.com/u/f67/14/47/99/84/10123111.png"><br><br>
Chef sage <br></span></a><div><a href="#" class="infobulle"></a><a href="http://xx-laguerredesclans.forums-actifs.com/u6 " target="_blank">Profil</a> . <a href="http://xx-laguerredesclans.forums-actifs.com/privmsg?mode=post&u=6" target=" _blank"="">Mp</a></div>

<br><br>
<a href="#" class="infobulle"><img src="http://i67.servimg.com/u/f67/14/47/99/84/staff310.jpg">
<span> <font color="#ffffff">~ Etoile du Tigre ~<br>
~ Chef du Clan de L'Ombre ~<br></font>
<br><img src="http://i67.servimg.com/u/f67/14/47/99/84/comets11.jpg"><br><br>
Admin raleur <br></span></a><div><a href="#" class="infobulle"></a><a href="http://xx-laguerredesclans.forums-actifs.com/u2" target="_blank">Profil</a> . <a href="http://xx-laguerredesclans.forums-actifs.com/privmsg?mode=post&u=2" target="_blank">Mp</a></div>
<br>
<a href="#" class="infobulle"><img src="http://i67.servimg.com/u/f67/14/47/99/84/staff910.jpg">
<span> <font color="#ffffff">~ Fléau ~<br>
~ Chef du Clan du Sang ~<br></font>
<br><img src="http://i67.servimg.com/u/f67/14/47/99/84/images13.jpg"><br><br>
Modo très présent<br></span></a><div><a href="#" class="infobulle"></a><a href="http://xx-laguerredesclans.forums-actifs.com/u8 " target="_blank">Profil</a> . <a href="http://xx-laguerredesclans.forums-actifs.com/privmsg?mode=post&u=8 " target="_blank">Mp</a></div>
<br>
<a href="#" class="infobulle"><img src="http://i67.servimg.com/u/f67/14/47/99/84/hbjkhn10.jpg">
<span> <font color="#ffffff">~ Nuage de Jais ~<br>
~ Aprenti Solitaire ~<br></font>
<br><img src="http://i67.servimg.com/u/f67/14/47/99/84/chat-110.jpg"><br><br>
Apprentis drôle <br></span></a><div><a href="#" class="infobulle"></a><a href="http://xx-laguerredesclans.forums-actifs.com/u9 " target="_blank">Profil</a> . <a href="http://xx-laguerredesclans.forums-actifs.com/privmsg?mode=post&u=9 " target="_blank">Mp</a></div>

Sauf que sa donne ça.
Sa ne marche pas Sad


Dernière édition par Etoile du tonnerre le Lun 7 Mar 2011 - 17:55, édité 1 fois
avatar

Etoile du tonnerre
**

Féminin
Messages : 61
Inscrit(e) le : 07/03/2011

http://heartart.forumsgratuits.fr/
Etoile du tonnerre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code infobulle

Message par Etoile du tonnerre le Lun 7 Mar 2011 - 16:48

Et aussi comment enlever ces bord noir sur mon forum
avatar

Etoile du tonnerre
**

Féminin
Messages : 61
Inscrit(e) le : 07/03/2011

http://heartart.forumsgratuits.fr/
Etoile du tonnerre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code infobulle

Message par Invité le Lun 7 Mar 2011 - 17:30

Bonjour,

Votre code ne peut pas fonctionner sans la partie CSS qui lui correspond. L'avez-vous?

D'autre part, le code pour une infobulle se compose ainsi:
Code:
<div class="infobulle"><img src="lien image ou apparait l'infobulle">
<span>Contenu de la bulle</span></div>
Exemple pour votre premire image avec infobulle:
Code:
<div class="infobulle"><img src="http://i67.servimg.com/u/f67/14/47/99/84/acueil10.jpg">
    <span><font color="#ffffff">~ Etoile du Tonnerre ~<br>
    ~ Chef du Clan du Tonnerre ~<br></font>
    <br><img src="http://i67.servimg.com/u/f67/14/47/99/84/jhjkh11.jpg"><br><br> Fondatrice Joyeuse et Active<br><a href="http://xx-laguerredesclans.forums-actifs.com/u1" target="_blank">Profil</a> . <a href="http://xx-laguerredesclans.forums-actifs.com/privmsg?mode=post&u=1" target="_blank">Mp</a></span></div>

Pour les lignes noires je ne peux pas vous aider.

Cordialement.
avatar

Invité
Invité


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

Résolu Re: Code infobulle

Message par Etoile du tonnerre le Lun 7 Mar 2011 - 17:36

Quel code CSS ??
avatar

Etoile du tonnerre
**

Féminin
Messages : 61
Inscrit(e) le : 07/03/2011

http://heartart.forumsgratuits.fr/
Etoile du tonnerre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code infobulle

Message par Invité le Lun 7 Mar 2011 - 17:39

Isolde a écrit:
Votre code ne peut pas fonctionner sans la partie CSS qui lui correspond. L'avez-vous?
Sur mon forum test ça fonctionne très bien avec les codes CCS appropriés. Qu'avez-vous dans la feuille CSS personnalisée?

Cordialement
avatar

Invité
Invité


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

Résolu Re: Code infobulle

Message par Etoile du tonnerre le Lun 7 Mar 2011 - 17:44

J'ai sa:

Code:

.colorpicker {
  width: 356px;
  height: 176px;
  overflow: hidden;
  position: absolute;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
  font-family: Arial, Helvetica, sans-serif;
  display: none;
}
.colorpicker_color {
  width: 150px;
  height: 150px;
  left: 14px;
  top: 13px;
  position: absolute;
  background: #f00;
  overflow: hidden;
  cursor: crosshair;
}
.colorpicker_color div {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
}
.colorpicker_color div div {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  overflow: hidden;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
  margin: -5px 0 0 -5px;
}
.colorpicker_hue {
  position: absolute;
  top: 13px;
  left: 171px;
  width: 35px;
  height: 150px;
  cursor: n-resize;
}
.colorpicker_hue div {
  position: absolute;
  width: 35px;
  height: 9px;
  overflow: hidden;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
  margin: -4px 0 0 0;
  left: 0px;
}
.colorpicker_new_color {
  position: absolute;
  width: 60px;
  height: 30px;
  left: 213px;
  top: 13px;
  background: #f00;
}
.colorpicker_current_color {
  position: absolute;
  width: 60px;
  height: 30px;
  left: 283px;
  top: 13px;
  background: #f00;
}
.colorpicker input {
  background-color: transparent;
  border: 1px solid transparent;
  position: absolute;
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
  color: #898989;
  top: 4px;
  right: 11px;
  text-align: right;
  margin: 0;
  padding: 0;
  height: 11px;
}
.colorpicker_hex {
  position: absolute;
  width: 72px;
  height: 22px;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
  left: 212px;
  top: 142px;
}
.colorpicker_hex input {
  right: 6px;
}
.colorpicker_field {
  height: 22px;
  width: 62px;
  background-position: top;
  position: absolute;
}
.colorpicker_field span {
  position: absolute;
  width: 12px;
  height: 22px;
  overflow: hidden;
  top: 0;
  right: 0;
  cursor: n-resize;
}
.colorpicker_rgb_r {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
  top: 52px;
  left: 212px;
}
.colorpicker_rgb_g {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
  top: 82px;
  left: 212px;
}
.colorpicker_rgb_b {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
  top: 112px;
  left: 212px;
}
.colorpicker_hsb_h {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
  top: 52px;
  left: 282px;
}
.colorpicker_hsb_s {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
  top: 82px;
  left: 282px;
}
.colorpicker_hsb_b {
  background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
  top: 112px;
  left: 282px;
}
.colorpicker_submit {
  position: absolute;
  width: 22px;
  height: 22px;
  background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
  left: 322px;
  top: 142px;
  overflow: hidden;
}
.colorpicker_focus {
  background-position: center;
}
.colorpicker_hex.colorpicker_focus {
  background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
  background-position: bottom;
}
.colorpicker_slider {
  background-position: bottom;
}

avatar

Etoile du tonnerre
**

Féminin
Messages : 61
Inscrit(e) le : 07/03/2011

http://heartart.forumsgratuits.fr/
Etoile du tonnerre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code infobulle

Message par Invité le Lun 7 Mar 2011 - 17:48

Oui, donc il vous manque toute la partie CSS des infobulles, ça ne risque pas de fonctionner ...
Ajoutez ceci à votre CSS personnalisé:
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: 2px;
left: 20px;
width: 150px ;
color:#FFF;
border: 1px solid #fff;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}

Cordialement.
avatar

Invité
Invité


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

Résolu Re: Code infobulle

Message par Etoile du tonnerre le Lun 7 Mar 2011 - 17:55

Sa marche !!
Merci beaucoup !
avatar

Etoile du tonnerre
**

Féminin
Messages : 61
Inscrit(e) le : 07/03/2011

http://heartart.forumsgratuits.fr/
Etoile du tonnerre 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