Survol lien... (onMouse hover)

[guilhem]

Bonjour à tous,
Je souhaiterais afficher un texte de légende au dessus de la souris lorsque l'utilisateur survole un lien. Quelqu'un a-t-il une idée de comment je peux faire ?
J'aimerais utiliser le css mais je doute que cela soit possible...
Merci de votre aide.
Guilhem.

[calimo]

Avec l'attribut title, tu peux donner plus de détails sur le lien. Il faut être conscient que certaines personnes ne le "verront" peut-être pas comme une infobulle.

[guilhem_mdg]

Ok mais y a-t-il moyen de personnaliser la bulle ? Par-exemple, changer la taille de celle-ci, lui mettre une couleur en fond, ...

[calimo]

Là ça devient compliqué
A priori tu devrais pouvoir positionner de manière absolue le contenu de l'attribut avec un truc du genre

Code : Tout sélectionner

a[title]:after {
content:attr(title);
position:absolute;
margin-top:1em;

Ensuite tu devrais pouvoir le mettre en forme comme tu veux.
Mais attention, je pense que la bulle sera dupliquée (quoique je n'en sais rien)

[psyco_thug]

J'ai rien dis

[Kropotkine]

Pour l'info-bulle il y a des scripts en Javascript

Quel beau script ...

Code : Tout sélectionner

if (!document.layers&&!document.all) 
event="test" 
function showtip2(current,e,text){ 

if (document.all&&document.readyState=="complete"){ 
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'

document.layers
document.all
<marquee>

Toutes des bonnes choses ...

[psyco_thug]

J'ai rien dis

[calimo]

Et sur cette page il y a 2 des 10 pires âneries qu'on peut faire (que je mets en gras) :

Pour que le texte survolé par la souris apparaisse comme un texte normal, sans être souligné en tant que lien, il suffit de préciser :
<A HREF="#" style="text-decoration:none" onMouseover="....">

Et puis un truc que je ne peux pas laisser passer :

img...alt title (metre le même texte dans les deux)

C'est faux ! alt indique un texte alternatif à afficher si l'image est introuvable et title permet de donner des informations supplémentaires.

[psyco_thug]

alt indique un texte alternatif à afficher si l'image est introuvable et title permet de donner des informations supplémentaires.

Oui oui...euh c'est ça que je voulais dire....ma main à glisser sur mon clavier

[calimo]

Ah, c'est dommage, on aurait pu la rapporter dans les "sites non conformes"

Je me rends compte que j'aurais du ajouter quelques smileys dans mon message précédent

[Invité]

Peut-être que ceci va vous intéresser http://www.madaboutstyle.com/tooltip2.html

[Kropotkine]

Tres joli ! 8) 8)

[calimo]

Très joli en effet, et ça fonctionne même avec IE, ce qui est assez incroyable C'est la première fois que je vois IE rendre quelque chose mieux que Opera.
Mis à part ça au niveau de l'accessibilité on fait mieux (mais aussi bien pire ! ), parce que pour certaines personnes l'attribut title est indispensable.

[guilhem]

Merci à tous pour toutes ces réponses. Je vais essayé de mettre ça en pratique et de voir ce que cela donne sous les différents browsers !
Cordialement.
Guilhem.

[Thomas]

http://ljouanneau.com/softs/javascript/tooltip.php