Infobulle avec affichage relatif

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

Résolu Infobulle avec affichage relatif

Message par Cædes le Dim 19 Juin 2011 - 21:11

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 ><


Dernière édition par Deadyth le Mer 29 Juin 2011 - 19:29, édité 1 fois

Cædes
****

Féminin
Messages : 299
Inscrit(e) le : 17/06/2007

http://capharnaum.forumactif.org/
Cædes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec affichage relatif

Message par Pakodar le Lun 20 Juin 2011 - 13:51

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

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec affichage relatif

Message par Cædes le Lun 20 Juin 2011 - 13:56

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.

Cædes
****

Féminin
Messages : 299
Inscrit(e) le : 17/06/2007

http://capharnaum.forumactif.org/
Cædes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec affichage relatif

Message par Pakodar le Mar 21 Juin 2011 - 8:34

Re,
Vous pourriez aussi créer plusieurs codes infobulles, une pour chaque image.
ça vous semble possible?

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec affichage relatif

Message par Cædes le Mar 21 Juin 2011 - 11:08

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 =/

Cædes
****

Féminin
Messages : 299
Inscrit(e) le : 17/06/2007

http://capharnaum.forumactif.org/
Cædes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec affichage relatif

Message par Cædes le Jeu 23 Juin 2011 - 1:41

Je relance, des fois que quelqu'un trouverait la réponse à ce petit problème =)

Cædes
****

Féminin
Messages : 299
Inscrit(e) le : 17/06/2007

http://capharnaum.forumactif.org/
Cædes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec affichage relatif

Message par Cædes le Ven 24 Juin 2011 - 18:13

Peut-être que quelqu'un peut m'aider ? =)

Cædes
****

Féminin
Messages : 299
Inscrit(e) le : 17/06/2007

http://capharnaum.forumactif.org/
Cædes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec affichage relatif

Message par tupac le Sam 25 Juin 2011 - 6:28

Bonjour

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>

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Infobulle avec affichage relatif

Message par Cædes le Sam 25 Juin 2011 - 12:03

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 =/

Cædes
****

Féminin
Messages : 299
Inscrit(e) le : 17/06/2007

http://capharnaum.forumactif.org/
Cædes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec affichage relatif

Message par tupac le Sam 25 Juin 2011 - 18:54

Quelque soit l'infobulle choisi vous voulez que les informations apparaissent toujours au même endroit c'est bien ça?

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Infobulle avec affichage relatif

Message par Cædes le Sam 25 Juin 2011 - 20:01

C'est tout à fait ça =)

Cædes
****

Féminin
Messages : 299
Inscrit(e) le : 17/06/2007

http://capharnaum.forumactif.org/
Cædes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec affichage relatif

Message par tupac le Dim 26 Juin 2011 - 10:35

et bien c'est ce que je vous est proposé!!!

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Infobulle avec affichage relatif

Message par Cædes le Dim 26 Juin 2011 - 16:18

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:



C'est exactement la même largeur du screen pour que vous vous rendiez bien compte mais même la longueur des flèches blanches prouve bien que ça n'est pas l'effet voulu =/

Cædes
****

Féminin
Messages : 299
Inscrit(e) le : 17/06/2007

http://capharnaum.forumactif.org/
Cædes a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Infobulle avec affichage relatif

Message par tupac le Dim 26 Juin 2011 - 16:56

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.

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>

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

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

Résolu Re: Infobulle avec affichage relatif

Message par Cædes le Mer 29 Juin 2011 - 19:28

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 =)

Cædes
****

Féminin
Messages : 299
Inscrit(e) le : 17/06/2007

http://capharnaum.forumactif.org/
Cædes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle avec affichage relatif

Message par tupac le Mer 29 Juin 2011 - 19:44

De rien et comptant de voir que cela fonctionne Very Happy

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac 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