Infobulle avec affichage relatif
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Infobulle avec affichage relatif
Bonjour,
je ne parviens pas à me dépatouiller de l'affichage de mes infobulles. Et après avoir touché un peu à tout sans parvenir au résultat escompté, j'utilise ma dernière carte : vous o/
Voilà, je voudrais donc des infobulles (ça encore ça va) mais au survol de la souris, je souhaiterai que les informations n'apparaissent pas dans une "bulle" mais dans une fenêtre en-dessous, quelque soit l'infobulle sélectionné (ce serait pour présenter mes personnages prédéfinis via la page d'accueil). Un petit schéma : Pour un résultat plus visible, le rendu serait le même que sur ce forum. Vous passez la souris sur les icons de Wanted People et hop, les informations apparaissent en-dessous =)
Merci d'avance à celle ou celui qui me sortira des ennuis o/
Edit : Oui, je pourrais utiliser un système d'onglet, mais ça va me faire un truc énorme (hébergement du script, et codage html en plus dans ma pa) alors que je sais qu'on peut le faire avec une simple infobulle ><
je ne parviens pas à me dépatouiller de l'affichage de mes infobulles. Et après avoir touché un peu à tout sans parvenir au résultat escompté, j'utilise ma dernière carte : vous o/
Voilà, je voudrais donc des infobulles (ça encore ça va) mais au survol de la souris, je souhaiterai que les informations n'apparaissent pas dans une "bulle" mais dans une fenêtre en-dessous, quelque soit l'infobulle sélectionné (ce serait pour présenter mes personnages prédéfinis via la page d'accueil). Un petit schéma : Pour un résultat plus visible, le rendu serait le même que sur ce forum. Vous passez la souris sur les icons de Wanted People et hop, les informations apparaissent en-dessous =)
Merci d'avance à celle ou celui qui me sortira des ennuis o/
Edit : Oui, je pourrais utiliser un système d'onglet, mais ça va me faire un truc énorme (hébergement du script, et codage html en plus dans ma pa) alors que je sais qu'on peut le faire avec une simple infobulle ><
Dernière édition par Deadyth le Mer 29 Juin 2011 - 19:29, édité 1 fois
Re: Infobulle avec affichage relatif
Bonjour,
Il est possible de changer la position avec:
top: -10px;
Celle-ci modifie la position de l'infobulle par rapport au haut de l'image
left: 10px; pour la position par rapport au bord gauche de l'image
Il est possible de changer la position avec:
top: -10px;
Celle-ci modifie la position de l'infobulle par rapport au haut de l'image
left: 10px; pour la position par rapport au bord gauche de l'image
Re: Infobulle avec affichage relatif
Bonjour Pakodar,
oui merci, je connais bien ce code, je sais bien qu'on peut modifier l'affichage de l'infobulle mais ce n'est pas ce que je cherche à faire. Si je modifie top & left dans mon css, chaque infobulle apparaitra, non pas comme je le souhaite, toujours au même endroit sous la rangée de mini-icone, mais selon l'endroit où se situe la flêche.
Dans mon image d'exemple, que ma souris soit sur la première icône ou l'avant dernière, l'infobulle s'affiche au même endroit : en dessous, dans le cadre. Tu vois ?
Mais merci quand même.
oui merci, je connais bien ce code, je sais bien qu'on peut modifier l'affichage de l'infobulle mais ce n'est pas ce que je cherche à faire. Si je modifie top & left dans mon css, chaque infobulle apparaitra, non pas comme je le souhaite, toujours au même endroit sous la rangée de mini-icone, mais selon l'endroit où se situe la flêche.
Dans mon image d'exemple, que ma souris soit sur la première icône ou l'avant dernière, l'infobulle s'affiche au même endroit : en dessous, dans le cadre. Tu vois ?
Mais merci quand même.
Re: Infobulle avec affichage relatif
Re,
Vous pourriez aussi créer plusieurs codes infobulles, une pour chaque image.
ça vous semble possible?
Vous pourriez aussi créer plusieurs codes infobulles, une pour chaque image.
ça vous semble possible?
Re: Infobulle avec affichage relatif
Vingt infobulles, donc vingt codes css différents à ajouter dans ma page html, donc une iframe à ajouter pour ne pas trop alourdir le codage déjà conséquent de ma page d'accueil... J'aimerai bien ne pas arriver à cette extrémité (même si j'avoue y avoir pensé pendant que je me tapais la tête sur mon clavier devant le problème 8D)
Je sais qu'il est possible de faire ce que je demande puisque j'ai un tutoriel en tête, lu il y a quelques semaines sur un site. Mais impossible de le retrouver =/
Je sais qu'il est possible de faire ce que je demande puisque j'ai un tutoriel en tête, lu il y a quelques semaines sur un site. Mais impossible de le retrouver =/
Re: Infobulle avec affichage relatif
Je relance, des fois que quelqu'un trouverait la réponse à ce petit problème =)
Re: Infobulle avec affichage relatif
Peut-être que quelqu'un peut m'aider ? =)
Re: Infobulle avec affichage relatif
Bonjour
Il suffisait juste de rajouter un margin left a l'intérieur de l'infobulle entre les deux images.
Il suffisait juste de rajouter un margin left a l'intérieur de l'infobulle entre les deux images.
- Spoiler:
- Code:
<style>
.infobull{position: relative;z-index: 0;}
.infobull:hover{z-index: 50;}
.infobull span{ position: absolute;visibility: hidden;}
.infobull span img{ border: 1px outset #FFFF00; background-color: #884DA7; padding: 4px;}
.infobull:hover span{ visibility: visible; top: 20px; left: -3px; width: auto; color:#FFFFFF; font-size: 13px; font-family: Palatino, time new roman, serif; padding: 5px; background-color: #000; border: 1px outset #fff; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;}
.infobull a{color:#FFFFFF;}
.infobull a:hover{color:#FFFF00;}
</style>
<table align="center"><tr><td>
<span class="infobull"><img src="http://hariboow.free.fr/upload/images/aliciazlz.jpg" alt="" width="126" height="126" style="border: 1px outset #FFFF00;background-color: #000;padding: 4px;"><span style="margin-left: 432px;"><center><i>Alicia Keys</i><br><img src="http://hariboow.free.fr/upload/images/aliciapcp.jpg" alt="" width="120" height="70" class="gradualfader"><br><a href="http://www.aliciakeys.com/fr/home">Site officiel A.K</a></span></td><td></td>
<td><span class="infobull"><img src="http://hariboow.free.fr/upload/images/aliciazlz.jpg" alt="" width="126" height="126" style="border: 1px outset #FFFF00;background-color: #000;padding: 4px;"><span style="margin-left: 288px;"><center><i>Alicia Keys</i><br><img src="http://hariboow.free.fr/upload/images/1290957237.jpg" alt="" width="120" height="70" class="gradualfader"><br><a href="http://www.aliciakeys.com/fr/home">Site officiel A.K</a></span></td><td></td>
<td><span class="infobull"><img src="http://hariboow.free.fr/upload/images/aliciazlz.jpg" alt="" width="126" height="126" style="border: 1px outset #FFFF00;background-color: #000;padding: 4px;"><span style="margin-left: 145px;"><center><i>Alicia Keys</i><br><img src="http://hariboow.free.fr/upload/images/wallpapera.jpg" alt="" width="120" height="70" class="gradualfader"><br><a href="http://www.aliciakeys.com/fr/home">Site officiel A.K</a></span></td><td></td>
<td><span class="infobull"><img src="http://hariboow.free.fr/upload/images/aliciazlz.jpg" alt="" width="126" height="126" style="border: 1px outset #FFFF00;background-color: #000;padding: 4px;"><span style="margin-left: 2px;"><center><i>Alicia Keys</i><br><img src="http://hariboow.free.fr/upload/images/726695rjr.jpg" alt="" width="120" height="70" class="gradualfader"><br><a href="http://www.aliciakeys.com/fr/home">Site officiel A.K</a></span></td>
</tr></table>
Re: Infobulle avec affichage relatif
Merci de votre proposition, mais je ne vois pas en quoi ça règle mon problème. L'infobulle se déplace toujours et n'apparait simplement en-dessous comme je le voudrais =/
Re: Infobulle avec affichage relatif
Quelque soit l'infobulle choisi vous voulez que les informations apparaissent toujours au même endroit c'est bien ça?
Re: Infobulle avec affichage relatif
C'est tout à fait ça =)
Re: Infobulle avec affichage relatif
et bien c'est ce que je vous est proposé!!!
Re: Infobulle avec affichage relatif
Absolument pas, l'infobulle continue de se déplacer selon l'icône sur lequel je passe la souris. Elle n'est pas placée définitivement. Elle se décale vers la droite à chaque choix d'icône. Ce qui coupe les informations sur ma page d'accueil. La preuve avec votre code directement :
- Spoiler:
Re: Infobulle avec affichage relatif
Vous voulez parler de ce petit décalage de 1 ou 2 min a chaque fois que l'on passe le curseur sur l'image mais c'est juste une question de réglage c'était a vous de les fignoler.
Bon j'ai refais les réglages mais il va falloir que vous les refassiez lorsque vous allez placer vos propres images.
Bon j'ai refais les réglages mais il va falloir que vous les refassiez lorsque vous allez placer vos propres images.
- Spoiler:
- Code:
<style>
.infobull{position: relative;z-index: 0;}
.infobull:hover{z-index: 50;}
.infobull span{ position: absolute;visibility: hidden;}
.infobull span img{ border: 1px outset #FFFF00; background-color: #884DA7; padding: 4px;}
.infobull:hover span{ visibility: visible; top: 20px; left: 0px; width: auto;}
.infobull a{color:#FFFFFF;}
.infobull a:hover{color:#FFFF00;}
</style>
<table align="center"><tr><td>
<span class="infobull"><img src="http://hariboow.free.fr/upload/images/aliciazlz.jpg" alt="" width="126" height="126"><span style="margin-left: 400px;"><img src="http://hariboow.free.fr/upload/images/aliciapcp.jpg" alt="" width="120" height="70"></span></td><td></td>
<td><span class="infobull"><img src="http://hariboow.free.fr/upload/images/aliciazlz.jpg" alt="" width="126" height="126"><span style="margin-left: 266px;"><img src="http://hariboow.free.fr/upload/images/1290957237.jpg" alt="" width="120" height="70"></span></td><td></td>
<td><span class="infobull"><img src="http://hariboow.free.fr/upload/images/aliciazlz.jpg" alt="" width="126" height="126"><span style="margin-left: 132px;"><img src="http://hariboow.free.fr/upload/images/wallpapera.jpg" alt="" width="120" height="70"></span></td><td></td>
<td><span class="infobull"><img src="http://hariboow.free.fr/upload/images/aliciazlz.jpg" alt="" width="126"><span style="margin-left: -2px;"><img src="http://hariboow.free.fr/upload/images/726695rjr.jpg" alt="" width="120" height="70"></span></td>
</tr></table>
Re: Infobulle avec affichage relatif
Merci d'avoir pris le temps de m'aider Tupac, j'ai pu placé mes deux rangées d'infobulles comme je le désirais =)
Re: Infobulle avec affichage relatif
De rien et comptant de voir que cela fonctionne
Sujets similaires
» affichage de l'infobulle dans le profil
» Problème avec mon infobulle
» Problème avec une infobulle
» Problème avec Infobulle.
» Probleme avec infobulle de mon QEEL
» Problème avec mon infobulle
» Problème avec une infobulle
» Problème avec Infobulle.
» Probleme avec infobulle de mon QEEL
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum