Info-bulle sur un lien en CSS ?
arthezius
Messages postés
3538
Date d'inscription
Statut
Membre
Dernière intervention
-
neo_selen -
neo_selen -
Bonjour,
Je cherche un moyen de créé une info-bulle sur un lien pour qu'au lieu d'un simple title="" on ai un bloc avec des propriété défini via les feuilles de style (border, background, etc...).
Par exemple, pour un lien:
Je voudrai remplacer le simple texte "info" par un bloc au survole de la souris.
On retouve ça au survole de la souris sur le textarea des réponses sur ce forum avec le texte "Donnez un maximum de détails permettant de décrire...."
Merci à ceux qui pourront m'aider.
Je cherche un moyen de créé une info-bulle sur un lien pour qu'au lieu d'un simple title="" on ai un bloc avec des propriété défini via les feuilles de style (border, background, etc...).
Par exemple, pour un lien:
<div class="containeur">a href="lien.php" title="info">Texte</a></div>
Je voudrai remplacer le simple texte "info" par un bloc au survole de la souris.
On retouve ça au survole de la souris sur le textarea des réponses sur ce forum avec le texte "Donnez un maximum de détails permettant de décrire...."
Merci à ceux qui pourront m'aider.
A voir également:
- Info bulle css
- Crystal disk info - Télécharger - Informations & Diagnostic
- Info pc - Guide
- Wifi info view - Télécharger - Divers Réseau & Wi-Fi
- Info 38028 ✓ - Forum Consommation & Internet
- J'ai reçu un sms louche du 38028 - Forum Mobile
7 réponses
bonsoir,
petit exemple avec CSS :
petit exemple avec CSS :
<html>
<head>
<style type="text/css">
a {
text-decoration:none;
position:relative;
color:gray;
}
a span {
display:none;
}
a:hover {
background:none;
}
a:hover span {
background-color:#eee;
color:#aaa;
display:block;
position:absolute;
top:20px;
left:60px;
padding:2px 5px;
border:1px dashed #333;
}
</style>
</head>
<body>
Definition : <a href="#">CSS<span>Cascading StyleSheet Language </span></a>
</body>
</html>
pyschopathe
Messages postés
1974
Date d'inscription
Statut
Membre
Dernière intervention
135
Oh yeah ! Trop fort, je savais même pas qu'on pouvais utiliser les pseudo classes avec l'héritage ^^ !
Mouais mais c'est quand même un peu limité. Si on veut faire apparaître un élément plus complexe qu'un span... En principe il ne faut pas mettre de div (ou autre élément de type block) dans les liens, à moins d'utiliser un autre élément que a, mais du coup on perd l'effet pour tous les visteurs tournant sous IE...
C'est là que Javascript rend la chose plus facile. Et si vous utilisez correctement les gestionnaires d'évènements et les méthodes du DOM, c'est aussi propre que du CSS ! :)
Eh oui quoi, il faut en finir avec cette idée reçue, "javascript c'est pas propre et c'est peu puissant"...
Le problème c'est que ça donne du code, certes léger, mais incompréhensible pour le débutant, et donc très vite décourageant. Surtout si on veut que ça marche AUSSI SOUS IE, putain, il fait tout le temps chier celui-là...
Alors Arthezius, si tu as le courage, je te montre vite fait comment on se sert des gestionnaires d'évènements. Je reprends l'idée de Psychopathe, en remplaçant juste le "onmouseover" par un fragment de script extérieur à la page. Après tu auras franchi un gros cap et ça te fera gagner beaucoup de temps plus tard !! ^^
C'est là que Javascript rend la chose plus facile. Et si vous utilisez correctement les gestionnaires d'évènements et les méthodes du DOM, c'est aussi propre que du CSS ! :)
Eh oui quoi, il faut en finir avec cette idée reçue, "javascript c'est pas propre et c'est peu puissant"...
Le problème c'est que ça donne du code, certes léger, mais incompréhensible pour le débutant, et donc très vite décourageant. Surtout si on veut que ça marche AUSSI SOUS IE, putain, il fait tout le temps chier celui-là...
Alors Arthezius, si tu as le courage, je te montre vite fait comment on se sert des gestionnaires d'évènements. Je reprends l'idée de Psychopathe, en remplaçant juste le "onmouseover" par un fragment de script extérieur à la page. Après tu auras franchi un gros cap et ça te fera gagner beaucoup de temps plus tard !! ^^
Ouai ça m'intéresse plutôt. A vrai dire en ce qui concerne JS c'est comme pour PHP. au départ ça me faisait un peu peur quand je voyais ça de loin et du coup j'ai mis un moment avant de me lancer.
Je veux donc bien que tu m'expliques.
Sinon, pour répondre à I'm_here, c'est en fait exactement le genre de chose que je voulais obtenir. Je vais étudier ça. Merci pour ton aide.
Je veux donc bien que tu m'expliques.
Sinon, pour répondre à I'm_here, c'est en fait exactement le genre de chose que je voulais obtenir. Je vais étudier ça. Merci pour ton aide.
php, c'est le serveur qui le gère, le client ne verra jamais le code qui crée, mais seulement le code créé: HTML généralement.
javascript, c'est le pc de celui qui consulte la page qui bosse. sur android les sites sont soit incomplets, soit le peu de javascript est créé pour de grands écrans.
essayez le site kubii sur PC, puis sur smartphone. Dans le 2e cas, vous allez trouver ça nettement moins convivial et facile !
J'ai pris parti de coder le moins possible avec Javascript, mais plutôt avec ce qu'offre CSS (notamment avec la mesure em, qui est extrêmement bien !)
testez graveyardofpain.free-h.net , vous verrez qu'il y a la même expérience de navigation autant sur Android que sur PC (windows et debian confondus, j'ai les deux).
pas de barre ennuyante, du code propre.
Mis à part le petit code js qui permet la compatibilité des balises avec d'anciennes versions d' Internet Explorer, et un compteur de visites qui affiche juste quelques images des chiffres.
javascript, c'est le pc de celui qui consulte la page qui bosse. sur android les sites sont soit incomplets, soit le peu de javascript est créé pour de grands écrans.
essayez le site kubii sur PC, puis sur smartphone. Dans le 2e cas, vous allez trouver ça nettement moins convivial et facile !
J'ai pris parti de coder le moins possible avec Javascript, mais plutôt avec ce qu'offre CSS (notamment avec la mesure em, qui est extrêmement bien !)
testez graveyardofpain.free-h.net , vous verrez qu'il y a la même expérience de navigation autant sur Android que sur PC (windows et debian confondus, j'ai les deux).
pas de barre ennuyante, du code propre.
Mis à part le petit code js qui permet la compatibilité des balises avec d'anciennes versions d' Internet Explorer, et un compteur de visites qui affiche juste quelques images des chiffres.
Je pense que c'est du javascript et pas du css : tu affiches un div au survol d'un lien. Le style du div est bien fait en css, mais l'affichage est dû à du js (du moins je suppose, je ne vois pas comment faire proprement sinon...)
En en javascript ça donnerai quoi?
Désolé de poser la question, mais j'ai jamais mis le nez dans le javascript pour le moment...
Désolé de poser la question, mais j'ai jamais mis le nez dans le javascript pour le moment...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Okay, c'est parti !
Alors on commence par l'outil gestionnaire d'évènement en lui-même. Il y a deux versions : celle du standard, addEventListener, et celle de IE :), attachEvent.
Pour ne pas avoir à choisir, la plupart des gens ont pris l'habitude de bricoler une fonction de leur cru.
Voici la mienne :
Le principe, c'est qu'on ajoute à un élément de la page un "écouteur" (listener en anglais) qui est en fait une fonction, qui réagira à un évènement particulier.
L'élément surveillé est le paramètre o de ma fonction ; l'évènement associé est e, et la fonction qui doit réagir est f.
Il faut aussi savoir que les évènements ainsi appellés, en version stantdard, sont 'load', 'mouseover', etc. --> pas de 'on' devant... sauf pour IE ^^
Dernier détail : le paramètre 'false' dans la version standard. Il concerne la capture de l'évènement, c.-à-d. le fait de l'empêcher de bouillonner. Dans 95% des cas, on n'a pas besoin de capturer l'évènement, donc je mets 'false' pour pas me casser la tête.
- Plus d'infos sur le bouillonnement -
Bien. Une fois cette fonction définie, on crée simpement un gestionnaire d'évènement ainsi :
Important : on ne met pas de parenthèses à la fonction qui doit réagir, car on désigne la fonction, mais on ne l'appelle pas tout de suite.
Ce n'est pas fini ! On ne peut pas attacher un évènement n'importe quand ! Il faut que l'élément ait déjà été chargé par le navigateur.
Une solution 'hybride' consiste à placer une balise script contenant le gestionnaire après l'élément correspondant. Exemple :
Mais si on veut n'avoir aucun fragment de script dans le contenu de la page, et c'est une intention louable (on parle de javascript non-intrusif ou unobstrusive javascript), on préfèrera créer les gestionnaires juste après le chargement de la page, ce qui correspond à l'évènement 'load' de l'objet window.
On a donc une fonction pour créer tous les gestionnaires, qui sera appellée au chargement de la page :
Il ne reste plus qu'à placer tout ça dans le <head>, ou mieux dans un fichier externe, par exemple load.js, qui sera lié dans le <head> grâce à une balise script :
Voilà, vous savez tout !
Si quelque chose n'est pas clair, n'hésitez pas à demander, je sais que des fois j'explique mal des choses pourtant simples...
Et je peux aussi vous parler des différentes méthodes du DOM, comme getElementsByTagName, getAttribute, etc.
Bon courage ;)
Alors on commence par l'outil gestionnaire d'évènement en lui-même. Il y a deux versions : celle du standard, addEventListener, et celle de IE :), attachEvent.
Pour ne pas avoir à choisir, la plupart des gens ont pris l'habitude de bricoler une fonction de leur cru.
Voici la mienne :
function addListener(o, e, f) { // object, event, function
if (o.addEventListener) { // version standard
o.addEventListener(e, f, false);
} else { // version IE
o.attachEvent('on' + e, f);
}
} // addListener
Le principe, c'est qu'on ajoute à un élément de la page un "écouteur" (listener en anglais) qui est en fait une fonction, qui réagira à un évènement particulier.
L'élément surveillé est le paramètre o de ma fonction ; l'évènement associé est e, et la fonction qui doit réagir est f.
Il faut aussi savoir que les évènements ainsi appellés, en version stantdard, sont 'load', 'mouseover', etc. --> pas de 'on' devant... sauf pour IE ^^
Dernier détail : le paramètre 'false' dans la version standard. Il concerne la capture de l'évènement, c.-à-d. le fait de l'empêcher de bouillonner. Dans 95% des cas, on n'a pas besoin de capturer l'évènement, donc je mets 'false' pour pas me casser la tête.
- Plus d'infos sur le bouillonnement -
Bien. Une fois cette fonction définie, on crée simpement un gestionnaire d'évènement ainsi :
addListener(objet, evenement, fonction);par exemple :
addListener( lien, 'mouseover', afficherDiv ); addListener( lien, 'mouseout', masquerDiv );En ayant auparavant sélectionné le lien via une méthode du DOM comme document.getElement...
Important : on ne met pas de parenthèses à la fonction qui doit réagir, car on désigne la fonction, mais on ne l'appelle pas tout de suite.
Ce n'est pas fini ! On ne peut pas attacher un évènement n'importe quand ! Il faut que l'élément ait déjà été chargé par le navigateur.
Une solution 'hybride' consiste à placer une balise script contenant le gestionnaire après l'élément correspondant. Exemple :
<a id="lien" href="...">lien</a>
<script type="text/javascript">
var lien = document.getElementById('lien');
addListener( lien, 'mouseover', afficherDiv );
addListener( lien, 'mouseout', masquerDiv );
</script>
Mais si on veut n'avoir aucun fragment de script dans le contenu de la page, et c'est une intention louable (on parle de javascript non-intrusif ou unobstrusive javascript), on préfèrera créer les gestionnaires juste après le chargement de la page, ce qui correspond à l'évènement 'load' de l'objet window.
On a donc une fonction pour créer tous les gestionnaires, qui sera appellée au chargement de la page :
function creerGestionnaires() {
var lien = document.getElementById('lien');
addListener(lien, 'mouseover', afficherDiv );
addListener(lien, 'mouseout', masquerDiv );
}
addListener( window, 'load', creerGestionnaires );
Il ne reste plus qu'à placer tout ça dans le <head>, ou mieux dans un fichier externe, par exemple load.js, qui sera lié dans le <head> grâce à une balise script :
<script type="text/javascript" src="load.js"></script>
Voilà, vous savez tout !
Si quelque chose n'est pas clair, n'hésitez pas à demander, je sais que des fois j'explique mal des choses pourtant simples...
Et je peux aussi vous parler des différentes méthodes du DOM, comme getElementsByTagName, getAttribute, etc.
Bon courage ;)
Ton cours à l'air clair. Toutefois, ne connaissant pas grand chose sur le sujet pour le moment, je n'ai pas encore testé. Serai t-il possible d'avoir un exemple concrêt du résultat attendu?
Bien sûr !
Voici un code en trois fichiers : un javascript, un css et un html.
infobulle.html :
infobulle.css :
infobulle.js :
J'en ai profité pour rajouter un bout de code qui fait que la div suit le mouvement de la souris.
Par contre, je me suis cassé la tête comme j'ai pu, je n'ai pas réussi à faire marcher ça sous IE... donc je n'ai mis que le code standard finalement. Il semblerait que ça foire au moment de l'accès aux propriétés de style de la div, mais en l'absence de console javascript évoluée... De toute façon IE c'est pourri :P
Voici un code en trois fichiers : un javascript, un css et un html.
infobulle.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Test infobulle</title> <link rel="stylesheet" type="text/css" href="infobulle.css"> <script type="text/javascript" src="infobulle.js"></script> </head> <body> <h1>Test infobulle</h1> <a id="lien" href="#">Proverbe</a> <div id="infobulle"> Tant va la cruche à l'eau qu'à la fin elle se casse. </div> </body> </html>
infobulle.css :
div#infobulle {
display: none;
position: absolute;
background: #fee;
padding: .2ex 1ex;
border: solid 1px red;
}
infobulle.js :
function addListener(o, e, f) {
if (o.addEventListener) {
o.addEventListener(e, f, false);
} else {
o.attachEvent('on' + e, f);
}
} // addListener
function afficherDiv(e) {
divStyle.display = 'inherit';
var x = e.clientX + 15;
var y = e.clientY + 10;
divStyle.left = x + 'px';
divStyle.top = y + 'px';
} // afficherDiv
function masquerDiv() {
divStyle.display = 'none';
} // masquerDiv
function creerGestionnaires() {
var lien = document.getElementById('lien');
addListener(lien, 'mousemove', afficherDiv);
addListener(lien, 'mouseout', masquerDiv);
divStyle = document.getElementById('infobulle').style; // variable globale
} // creerGestionnaires
addListener(window, 'load', creerGestionnaires);
J'en ai profité pour rajouter un bout de code qui fait que la div suit le mouvement de la souris.
Par contre, je me suis cassé la tête comme j'ai pu, je n'ai pas réussi à faire marcher ça sous IE... donc je n'ai mis que le code standard finalement. Il semblerait que ça foire au moment de l'accès aux propriétés de style de la div, mais en l'absence de console javascript évoluée... De toute façon IE c'est pourri :P
