"Infobulle" avec image
CrazyOfRafa
-
Melooo Messages postés 1476 Statut Membre -
Melooo Messages postés 1476 Statut Membre -
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!
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!
A voir également:
- Infobulle image html
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Légender une image - Guide
- Reduire taille image - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
1 réponse
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;
}
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.
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à
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? ;)
https://ljouanneau.com
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.