"Infobulle" avec image
Fermé
CrazyOfRafa
-
19 juin 2012 à 13:52
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 - 19 juin 2012 à 16:15
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 - 19 juin 2012 à 16:15
A voir également:
- Infobulle image html
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Acronis true image - Télécharger - Sauvegarde
- Image iso windows 10 - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
1 réponse
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
19 juin 2012 à 14:22
19 juin 2012 à 14:22
Salut,
Non pas besoin de javascript en HTML et CSS, ca se fait très bien ;)
et le CSS qui va avec :
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;
}
19 juin 2012 à 14:44
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.
19 juin 2012 à 14:46
si tu veux mettre une image tu n'a qu'a faire :
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à
Modifié par CrazyOfRafa le 19/06/2012 à 15:30
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? ;)
19 juin 2012 à 15:45
https://ljouanneau.com
19 juin 2012 à 16:15
1- Mettre dans ton code html entre les balises <head> ceci :
Que tu trouveras ici : https://ljouanneau.com
2- Ton infobulle doit être codé comme ca :
3- Le texte ou l'image qui déclenchera ton infobulle :
<div onmouseover="tooltip.show(this)" onmouseout="tooltip.hide(this)" title="<img src='images/ton-image.jpg' />Hello you !" class="test">Voici le contenu d'une div, avec un exemple de bulle d'aide. Passez votre souris au dessus.</div>Hello you étant le message qui va être affiché dans ton infobulle...
Et dans ton infobulle tu as bien une image.