Infobulles multiples

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

Résolu Infobulles multiples

Message par kanyza le Sam 12 Nov 2011 - 17:34

Bonjour à tous et à toutes

voilà mon problème je voudrais faire une infobulle multiple en cascade

Pour l'instant j'en suis là et je voudrais qu'en passant le curseur de la souris sur l'image 2

Spoiler:

Une troisième infobulle s'ouvre avec 6 mini infobulles de 200px de large par 300px de hauteur à l'intérieur
comme ceci.

Spoiler:

Voici mon code Html que j'ai bidouiller pour avoir déjà mes deux premières infobulles image 1 et image 2

Code:
<table border="0"/align="center"</td></tr>
        <tr><td><span class="profilbullel"><div class="littlone"><img src="http://img74.xooimage.com/files/9/2/1/image1-2eaadf0.jpg">
/</div>

        <span><center><div class="bulimg" align="center"><img src="http://img71.xooimage.com/files/3/2/c/image2-2eaaf6f.jpg"></div></center><div class="infobul" align="center"><center>Texte</center></div></span>
</td></tr>
        </td></tr></table>

Et voici le CSS où là je ne connais absolument rien a part modifier les valeurs pour la taille des images et modifier les couleurs

Code:
/*les-petits-tombnails---------------*/
.littlone {
background: #000000;
width: 200px;
height: 100px;
color: black;
border: 3px solid #ffffff;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
-htm-border-radius: 13px;
-o-border-radius: 13px;
border-radius: 13px;
padding: 3px;
margin-top: 5px;
}
/*bu-bulles-sur-tombnails------------*/
span.profilbullel span {
display: none;
}
span.profilbullel:hover span {
display: block;
position: absolute;
width: 200px ;
height: auto;
margin-top: -90px;
margin-left: -160px;
background-color: #000000;
font-size: 11px;
color: #000000;
font-style: italic;
font-weight: bold;
border: 3px solid #ffffff;
-moz-border-radius:13px;
-webkit-border-radius: 13px;;
border-radius: 13px;
padding: 7px;
z-index: 3;
}
span.profilbuller span {
display: none;
}
span.profilbuller:hover span {
display: block;
position: absolute;
width: 200px ;
height: auto;
margin-top: -90px;
margin-left: 50px;
background-color: #000000;
font-size: 11px;
color: #000000;
font-style: italic;
font-weight: bold;
border: 3px solid #ffffff;
-moz-border-radius:13px;
-webkit-border-radius: 13px;;
border-radius: 13px;
padding: 7px;
z-index: 3;
}
.bulimg{
background: #000000;
width: 180px;
height: 200px;
color: black;
border: 3px solid #ffffff;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
padding: 3px;
margin-top: 5px;
}
.infobul {
text-align: left;
color: #ffffff;
font-style: italic;
font-weight: bold;
padding-left: 3px;
}
.infobulink a {
color: #ffffff!important;
font-style: italic;
font-weight: bold;
padding-right: 3px;
}

Merci à ceux ou à celles qui pourront m'aider et par avance je vous en remercie

Amicalement kanyza



Dernière édition par kanyza le Mar 15 Nov 2011 - 17:01, édité 1 fois

kanyza
Nouveau membre

Messages : 28
Inscrit(e) le : 11/11/2011

http://fantasy-war.forumactif.com/
kanyza a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles multiples

Message par kanyza le Lun 14 Nov 2011 - 10:11

Petit up et petite question en passant quelqu'un a t'il déjà vu ce type d'infobulles multiples ?

kanyza
Nouveau membre

Messages : 28
Inscrit(e) le : 11/11/2011

http://fantasy-war.forumactif.com/
kanyza a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles multiples

Message par Final-Blonde le Lun 14 Nov 2011 - 20:24

Bonsoir,

Voyons déjà l'infobulle à deux bulles en plus...
Dans celle-ci, ce serait un cliquant ou par le hover sur un mot que la troisième s'ouvriaait ?
Parce que sur ton schéma je n'en vois que deux, ou alors une direct sur celle d'en dessous... /-:

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles multiples

Message par kanyza le Lun 14 Nov 2011 - 20:42

Bonsoir je voudrais que l'infobulle s'ouvre quand le curseur de la souris passe sur l'image n°2

Pour bien résumer le curseur passe sur l'image 1 >>>> l'infobulle avec l'image 2 s'ouvre >>>> et ensuite en passant le curseur de la souris sur l'image 2 une dernière fenêtre s'ouvre. dans laquelle je pourrait insérer un tableau.

Bon j'ai avançé un peu en simplifiant le CSS

CSS ci-Dessous
Code:
        /*les-petits-tombnails---------------*/
        .littlone {
        background: #000000;
        width: 200px;
        height: 100px;
        color: black;
        border: 3px solid #ffffff;
        -moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        -htm-border-radius: 13px;
        -o-border-radius: 13px;
        border-radius: 13px;
        padding: 3px;
        margin-top: 5px;
        }
        /*bu-bulles-sur-tombnails------------*/
        span.profilbullel span {
        display: none;
        }
        span.profilbullel:hover span {
        display: block;
        position: absolute;
        width: 200px ;
        height: 300px;
        margin-top: -90px;
        margin-left: -160px;
        background-color: #000000;
        font-size: 11px;
        color: #000000;
        font-style: italic;
        font-weight: bold;
        border: 3px solid #ffffff;
        -moz-border-radius:13px;
        -webkit-border-radius: 13px;;
        border-radius: 13px;
        padding: 7px;
        z-index: 3;
        }
        /*bu-bulles-sur-tombnails------------*/
        span.profilbullel2 span {
        display: block;
        }
        span.profilbullel2:hover span {
        display: none;
        position: absolute;
        width: 200px ;
        height: 300px;
        margin-top: -90px;
        margin-left: -160px;
        background-color: #000000;
        font-size: 11px;
        color: #000000;
        font-style: italic;
        font-weight: bold;
        border: 3px solid #ffffff;
        -moz-border-radius:13px;
        -webkit-border-radius: 13px;;
        border-radius: 13px;
        padding: 7px;
        z-index: 4;
        }
 

Le code Html ci-dessous
Code:
<table border="0"/align="center"</td></tr>
        <tr><td><span class="profilbullel"><div class="littlone"><img src="http://img74.xooimage.com/files/9/2/1/image1-2eaadf0.jpg">
/</div>
        <span><center><div class="profilbullel" align="center"><img src="http://img71.xooimage.com/files/3/2/c/image2-2eaaf6f.jpg"></div></center><div class="infobul" align="center"><center>Texte</center></div>

        <span><center><div class="profilbullel2" align="center"><img src="http://img66.xooimage.com/files/e/0/f/image3-2ebf8ed.jpg"></div></center><div class="infobul" align="center"><center>Texte</center></div></span>
</td></tr>
        </td></tr></table>

Et voici le résultat
Spoiler:

Le problème est que quand le curseur de la souris passe sur l'image 1 les deux autres s'ouvrent alors que je voudrais que seulement l'image 2 s'ouvre quand le curseur est sur l'image 1 et ensuite quand je passe sur l'image 2 l'infobulle 3 s'ouvre.


kanyza
Nouveau membre

Messages : 28
Inscrit(e) le : 11/11/2011

http://fantasy-war.forumactif.com/
kanyza a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles multiples

Message par Final-Blonde le Mar 15 Nov 2011 - 16:08

Salutti,

En effet, c'est un peu un casse-tête, mais il suffit de bien visualiser l'enchaînement et ensuite tout se met en place logiquement.

Alors, je n'ai rien suivi de tes codes, mon côté quelque peu autiste bloque avec les identifiants des autres, la mise en page des codes, bref, justement, je ne visualise pas.
Donc excuse-moi pour cela, mais voici le HTML façon FB :
Code:
<table class="bulcasca" border="0" align="center"><tr><td align"center">
<table class="primero"><tr><td><img src="http://img74.xooimage.com/files/9/2/1/image1-2eaadf0.jpg">
<table class="secundo"><tr><td><img src="http://img71.xooimage.com/files/3/2/c/image2-2eaaf6f.jpg">
<div class="infobtext">Texte</div>
<div><img src="http://img66.xooimage.com/files/e/0/f/image3-2ebf8ed.jpg">
</div>
</td></tr></table>
</td></tr></table>
</td></tr></table>
Je pense que tu vois bien le schéma, oui ?

Dans le CSS, on reprend, et là tu comprendras encore mieux :
Spoiler:

ETC.
On pourrait aller ainsi à l'infini et qu'en balisant avec du CSS. (-:

Dans ton HTML, en lieu et place de balises supplémentaires inutiles pour centrer, utilises les balises en place comme celles des cellules "td" et celle des blocs "div", avec un simple align="center"
Le "td" est une des seules balises à pouvoir aligner verticalement son contenu avec valign="top"

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles multiples

Message par kanyza le Mar 15 Nov 2011 - 16:50

Merci Beaucoup Final-Blonde ça marche nikel j'ai juste modifié ces valeurs margin-top: -90px;
margin-left: -160px;

kanyza
Nouveau membre

Messages : 28
Inscrit(e) le : 11/11/2011

http://fantasy-war.forumactif.com/
kanyza a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles multiples

Message par Final-Blonde le Mar 15 Nov 2011 - 17:02

Dans un post, pas de saut à ligne, pas de mise en page fantaisiste, parce que tout est pris en compte.



EDIT : OK. Nous nous sommes croisés.

Quant aux valeurs, ce sont les tiennes que j'ai juste copiées-collées.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles multiples

Message par kanyza le Mar 15 Nov 2011 - 17:06

Encore merci superbe boulot bravo

voici le résultat

http://earth2147.forumgratuit.org/t2-infobulles-test

kanyza
Nouveau membre

Messages : 28
Inscrit(e) le : 11/11/2011

http://fantasy-war.forumactif.com/
kanyza a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles multiples

Message par Final-Blonde le Mar 15 Nov 2011 - 17:28

@Final-Blonde a écrit:Dans un post, pas de saut à ligne, pas de mise en page fantaisiste, parce que tout est pris en compte
Je ne les vois pas pour ça alors que dans un post chez moi c'est bon.

Attention, avec FF le top: yypx; est très différent en comparaison GC, IE, Opera, Safari.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles multiples

Message par kanyza le Mar 15 Nov 2011 - 17:31

@Final-Blonde a écrit:
@Final-Blonde a écrit:Dans un post, pas de saut à ligne, pas de mise en page fantaisiste, parce que tout est pris en compte
Je ne les vois pas pour ça alors que dans un post chez moi c'est bon.

Attention, avec FF le top: yypx; est très différent en comparaison GC, IE, Opera, Safari.

Ok merci pour l'info c'est pour ça que je voyais pas la 2eme infobulle avec Firefox

kanyza
Nouveau membre

Messages : 28
Inscrit(e) le : 11/11/2011

http://fantasy-war.forumactif.com/
kanyza a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulles multiples

Message par Final-Blonde le Mar 15 Nov 2011 - 17:38

Oui.
Ce qui fonctionne bien pour tous les navs courants avec le "display: absolute" c'est le margin-top, et laisser le "top: ??px"

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde 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