mouse over sur un mot d'un texte

16 mars 2005, 02:13

Bonjour à tous

Je suis en train de faire un cours sur l'utilisation de linux. Dans ce cours, il existe un glossaire où certains mots ont été expliqués. Il y a donc des liens dans toutes les pages du cours vers la page glossaire.
Pour les utilisateurs du cours, il serait difficile d'aller à chaque fois vers la page glossaire et revenir à la page où ils étaient. C'est pourquoi j'aimerais faire en sorte qu'en mettant la souris sur un mot, l'explication sur ce mot apparaisse dans un cadre (attention: pas dans une nouvelle fenêtre) sans avoir besoin de cliquer sur le mot en question. J'insiste que l'explication doit s'afficher quand on met la souris sur un mot d'un texte et pas sur un cadre ou une cellule d'un tableau.
Est-ce qu'il y a moyen de faire ça en javascript?

Merci d’avance

16 mars 2005, 02:32

Exemple de ce que tu pourrais faire:

Code : Tout sélectionner

J'ai utilisé <span title="PHP: Hypertext Preprocessor">PHP</span> sur mon site.

16 mars 2005, 21:07

Salut,
Pour ce qui est de la simplicité, la solution de Xenon_54 est la meilleur

Maintenant, si tu veux quelque chose d'un peu plus élaboré, voici un script JS:

Code : Tout sélectionner

<html>
<head>
</head>
<body>
<style type="text/css">
.popperlink { POSITION: absolute; VISIBILITY: hidden }
</style>

<DIV class=popperlink id=topdecklink></DIV>

<SCRIPT language="JavaScript">

domok = document.getElementById;
if (domok)
	{
	skn = document.getElementById("topdecklink").style;
	if(navigator.appName.substring(0,3) == "Net")
		document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = get_mouse;
	}

function poplink(msg)
{

var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=1><TR><TD BGCOLOR=#7189AB><FONT COLOR=#FFCC00 SIZE=1 face='Verdana'><CENTER><B>"+msg+"</B></CENTER></TD></TR></TABLE></TD></TR></TABLE>";

	if (domok)
		{
	  	document.getElementById("topdecklink").innerHTML = content;
	  	skn.visibility = "visible";
  		}
}

function get_mouse(e)
	{
	var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
	var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
	skn.left = x - 60;
	skn.top = y+20;
	}

function killlink()
	{
	if (domok)
  		skn.visibility = "hidden";
	}

</SCRIPT>
<A onMouseOver="poplink('La description de ton lien ici');" onmouseout="killlink()" href="http://www.ta_page.com">Ton lien</a><br><br>
</body>
</html>

Bye

13 avr. 2005, 20:22

Je voudrais faire la même chose pour mon site, mais je n'ai pas compris certaines choses. Pourrais-tu mettre des commentaires dans le code?

Merci d'avance

13 avr. 2005, 21:18

Je voudrais faire la même chose pour mon site...

Ça doit pas urger...un mois plus tard...

14 avr. 2005, 21:42

Mais je cherchais cette fonction sur un forum, et je l'ai finalement trouvée. J'ai appris l'existence de ce message hier

mouse over sur un mot d'un texte

Qui est en ligne