Sujet Précédent Sujet Suivant

Info-bulle sur un lien en CSS ?

Fermé
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 30 oct. 2008 à 00:44
 neo_selen - 13 janv. 2014 à 19:33
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: 
<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.

7 réponses

Réponse 1 / 7
I'm_Here Messages postés 154 Date d'inscription mardi 15 juillet 2008 Statut Membre Dernière intervention 30 novembre 2008 26
30 oct. 2008 à 01:41
bonsoir,

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>
5
pyschopathe Messages postés 1973 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010 135
30 oct. 2008 à 02:03
Oh yeah ! Trop fort, je savais même pas qu'on pouvais utiliser les pseudo classes avec l'héritage ^^ !
0
Réponse 2 / 7
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
30 oct. 2008 à 02:55
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 !! ^^
1
pyschopathe Messages postés 1973 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010 135
30 oct. 2008 à 03:07
Moi je suis preneur Groarh ! Et pour moi, le vrai problème avec JS est surtout qu'il peut être désactivé par le client (ou que son navigateur peut ne pas le comprendre...), on ne peut donc pas se reposer dessus pour des mécanismes indispensables de l'application.
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
30 oct. 2008 à 04:03
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.
0
neo_selen
13 janv. 2014 à 18:30
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.
0
neo_selen
13 janv. 2014 à 18:31
kubii.fr je précise.
0
Réponse 3 / 7
pyschopathe Messages postés 1973 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010 135
30 oct. 2008 à 00:50
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...)
0
Réponse 4 / 7
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
30 oct. 2008 à 01:01
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...
0
pyschopathe Messages postés 1973 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010 135
30 oct. 2008 à 01:15
Pas encore dans le JS pour le moment non plus, mais il doit y avoir moyen en utilisant l'évènement onmouseover d'appeler une fonction javascript qui rende un div créé à l'avance visible en supprimant un display="none" par exemple...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
30 oct. 2008 à 16:04
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 :
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 ;)
0
pyschopathe Messages postés 1973 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010 135
31 oct. 2008 à 00:30
Très bon cours, je te remercie vraiment ! En plus c'est beau, c'est clair et c'est propre, tu nous cause de JS non intrusif (ça bieeen !). 10 sur 10 en ce qui me concerne.
0
pyschopathe Messages postés 1973 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 22 mars 2010 135
31 oct. 2008 à 13:31
Je préciserais quand même que les fonctions afficherDiv et masquerDiv doivent être écrites par l'utilisateur (oui, ce n'est pas forcément évident pour tous).
0
Réponse 6 / 7
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
31 oct. 2008 à 12:25
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?
0
Réponse 7 / 7
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
31 oct. 2008 à 14:24
Bien sûr !
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
0
neo_selen
13 janv. 2014 à 19:33
:troll: entre JS et IE, en même temps ... :troll:

trollage mis à part, IE a du mal à suivre des standards ouverts (si c'est pas une histoire de rester accroché aux anciennes pratiques ! avec la déclaration dégueu des html 1.1 DTD http://etmonq.c-du.com/poulet etc.)
0

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"
sidojaice -
JIP -

24 réponses
ne pas utiliser la souris mais le clavier
isabela -
thomas-richet -

32 réponses
lien copié
alaurore -
LEFEUVRE -

7 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
Lien phishing android
mcafferty -
mcafferty -

8 réponses