Infobulles multiples

[kanyza]

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

[kanyza]

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

[kheino]

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... /-:

[kanyza]

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.

[kheino]

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"

[kanyza]

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

[kheino]

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.

[kanyza]

Encore merci superbe boulot bravo

voici le résultat

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

[kheino]

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.

[kanyza]

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

[kheino]

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