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:

Une info bulle qui reste ouverte
Info pc - Guide
Combien de temps reste une story sur facebook - Guide
Video bulle whatsapp - Accueil - Messagerie instantanée
Crystaldisk info - Télécharger - Informations & Diagnostic
Wifi info view - Télécharger - Divers Réseau & Wi-Fi

2 réponses

Réponse 1 / 2

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

Réponse 2 / 2

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

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>

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

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

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?

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

Discussions similaires

sms du 38028

Infobulle survol souris

Logiciel équivalent à Crystal Disk Info pour Mac.

Whatsapp pouce