"Infobulle" avec image

CrazyOfRafa -  
Bonjour,

Je suis relativement débutant (quelques mois) en matière de webmastering.

En prenant l'exemple de ce site (http://www.radioshacknissantrek.com), où l'on trouve, en bas de page, dans la section "riders", en survolant sur l'un des noms ou sur l'un des drapeaux, il apparaît une sorte d'infobulle où sont logés une courte description ainsi que la photo du coureur.

Comment reproduire ce type "d'infobulle mutante"? J'imagine qu'il faut passer par le javascript? Où est ce code javascript, je n'arrive pas à le trouver?

Merci d'avance pour vos conseils!

1 réponse

  1.  Melooo
    Salut,
    Non pas besoin de javascript en HTML et CSS, ca se fait très bien ;) 
    <a class="info" href="#">texte du lien<span>Description de l'infobulle</span></a>

    et le CSS qui va avec : 
    a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
 
a.info:hover{
z-index:25;
background-color:#FFF
}
 
a.info span{
display: none
}
 
a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}
    1. CrazyOfRafa
      Merci, c'est beaucoup plus simple comme cela en effet. ;)
      Cependant, par rapport à l'exemple que j'ai donné, ce n'est pas tout à fait la même chose.

      Déjà parce qu'il y a une image dans ce que je cherche, et pas seulement du texte.

      De plus, j'aimerai que l'infobulle soit "mobile", comme sur le site que j'ai mentionné dans ma description, c'est-à-dire qu'en bougeant la souris sur un mot, l'infobulle "suit".

      Merci par avance.
    2. Melooo
      Oui c'est pas tout à fait la même chose mais on es pas la pour faire le boulot :)
      si tu veux mettre une image tu n'a qu'a faire : 
      <a class="info" href="#">texte du lien<span><img src="images/ton-image.jpg" />Description de l'infobulle</span></a>

      Et à toi d'arranger la mise en page avec le CSS...
      Sur l'exemple que je t'ai fourni, l'infobulle suit. ou alors je comprends pas ce que tu veux dire par là
    3. CrazyOfRafa
      C'est vrai, excuse-moi ^^
      Merci pour l'image, ça fonctionne à merveille!

      Pour la mise en page, je vais essayer d'utiliser du CSS3 pour des effets de transitions plus "doux". Est-ce possible, par exemple, de faire apparaître doucement (en 1s environ?) l'infobulle?

      Ce que je veux dire par "l'infobulle suit", c'est qu'elle se déplace légèrement lorsqu'on pointe sur le lien. Autrement dit, l'infobulle n'a pas une position statique dans l'espace mais se déplace selon la position de la souris sur le texte d'origine. C'est plus compréhensible or not? ;)
    5. CrazyOfRafa
      Ah mince, je n'y connais rien en javascript, enfin quasiment rien. Ca aurait été possible d'insérer une image aussi, avec le javascript?

Discussions similaires

Retrouver l'image originale d'une photo modifiée
Raven

10 réponses
Comment recadrer une image avec Inkscape
infofeet

13 réponses