|
Accueil > Javascripts >
Divers > Affichage d'un texte au survol d'un lien
ou d'une image.
Ce
script est le même que celui affichant les petits textes
dans la page d'accueil de la zone membre au survol des
icônes des services.
[ Survolez-moi
! ]
________________________________________________________________
Le code n°1 est à placer dans l'en-tête de votre page
entre les balises <head> et </head> :
<style type="text/css">
.popper { POSITION: absolute; VISIBILITY: hidden }
</style>
________________________________________________________________
Le code n°2 est à placer en haut du corps de votre page.
La ligne après la balise d'ouverture du corps de votre
page (la balise <body>) :
<DIV class=popper id=topdeck></DIV>
<SCRIPT language="JavaScript">
var nava = (document.layers);
var iex = (document.all);
var skn = (nava) ? document.topdeck : topdeck.style;
if (nava) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;
function pop(msg)
{
var content ="<TABLE WIDTH=300 HEIGHT=10 BORDER=0 CELLPADDING=1 CELLSPACING=0 BGCOLOR=#000000><TR><TD><TABLE WIDTH=100% HEIGHT=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=#FFFFE7><TR><TD valign=top><FONT COLOR=#000000 SIZE=1 face='Verdana'><p align=left>"+msg+"</p></TD></TR></TABLE></TD></TR></TABLE>";
if (nava)
{
skn.document.write(content);
skn.document.close();
skn.visibility = "visible";
}
else if (iex)
{
document.all("topdeck").innerHTML = content;
skn.visibility = "visible";
}
}
function get_mouse(e)
{
var x = (nava) ? e.pageX : event.x+document.body.scrollLeft;
var y = (nava) ? e.pageY : event.y+document.body.scrollTop;
skn.left = x - 150;
skn.top = y+14;
}
function kill()
{
skn.visibility = "hidden";
}
</SCRIPT>
________________________________________________________________
En gras, ci-dessous, le code à ajouter dans vos liens
:
<a onMouseOver="pop('Votre texte !');" onmouseout="kill()"
href="http://www.site.com">Cliquez-ici !</a>
Voici un exemple pour une image :
<a onMouseOver="pop('Votre texte !');" onmouseout="kill()"
href="http://www.site.com"><img
src="http://www.site.com/image.jpg"
border="0"></a>
________________________________________________________________
Si vous souhaitez que le texte apparaisse au survol d'un
objet (image, texte, etc) mais sans qu'il ne soit possible
de cliquer, voici le code (pensez :
<a onMouseOver="pop('Votre texte !');" onmouseout="kill()"><img
src="http://www.site.com/image.jpg"
border="0"></a>
________________________________________________________________
|
