Une info bulle qui reste ouverte

Résolu/Fermé
gwenm Messages postés 594 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 17 mai 2024 - 5 avril 2011 à 20:58
gwenm Messages postés 594 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 17 mai 2024 - 9 avril 2011 à 12:36
Bonjour, je voudrais faire en sorte qu' une info bulle reste ouverte pour pouvoir y mettre plus de contenu et un lien vers une page ou autre...

Voici ce que j' utilise :

CSS
a.info {
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.info:hover span {
display: inline;
position: absolute;
top: 2em;
left: 1em;
background: white;
-moz-border-radius: 10px;
text-align: center;
color: grey;
padding: 2px;
}


HTML

<p>Survolez le mot <a class="info" href="#">"Toto" <span><img src="images/sudoku.gif" ><p>un petit garçon sympathique</span></a>


A voir également:

2 réponses

Jamari208 Messages postés 7 Date d'inscription vendredi 25 mars 2011 Statut Membre Dernière intervention 20 juillet 2011 38
6 avril 2011 à 03:35
<span id="a">aaaaaaa</span>
<input type="submit" name="aa" onMouseOver="a.innerHTML='bbbbbbbbbbbb';" value="de contenu ">
0
gwenm Messages postés 594 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 17 mai 2024 30
6 avril 2011 à 08:39
Hello, j' ai mis tons script à la place du mien, mais il n' y a pas du tout d' info bulle..
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
6 avril 2011 à 09:14
Salut,
ton code fonctionne bien, la seule petite erreur c'est que ton images tu la met trop bas, donc du coup le hover ne fonctionne pas... essayes de mettre le top à 1em...
<style>
a.info {
position: relative;
text-decoration: none;
color: black;
border-bottom: 1px gray dotted;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500;
}
a.info:hover span {
display: inline;
position: absolute;
top: 1em;
left: 1em;
background: white;
-moz-border-radius: 10px;
text-align: center;
color: grey;
padding: 2px;
}

</style>

<p>Survolez le mot <a class="info" href="#">"Toto" <span><img src="images/allergies.png" ><p>un petit garçon sympathique</span></a>


0
gwenm Messages postés 594 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 17 mai 2024 30
6 avril 2011 à 13:23
excellent! C'est niquel, ca joue vraiment à pas grand chose défois..merci infiniment Melooo ;)
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
6 avril 2011 à 13:55
Oui pour le coup ca ce jouait à 1pixels près
Pas de quoi ;)
0
gwenm Messages postés 594 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 17 mai 2024 30
8 avril 2011 à 18:42
je n' arrive pas à trouver comment placer les images dans mon info bulle à gauche du texte..je ne trouve pas de code à ajouter au css, et <ALIGN="left"> fonctionne pas non plus..une idée?
0
Melooo Messages postés 1405 Date d'inscription vendredi 28 novembre 2008 Statut Membre Dernière intervention 18 mars 2013 84
9 avril 2011 à 09:55
Essayes de mettre ton image en float:left et ton texte en float:right
0