Texte et image avec la souris

DEMONSTRATION

Regardez en haut de cette page : des images et du texte suivent la position horizontal de la souris. Vous pouvez choisir le coté où la zone flottante devra translater.

Code source entre <BODY> et </BODY>
top

<SCRIPT LANGUAGE="JavaScript">
<!--
//Merci de ne pas effacer ces lignes
//D'autres script,applet,images sur webgraf.Com 
//Mathieu Gros, webmaster@webgraf.Com

// Ci-dessous mettez votre texte et vos balises HTML
var texte='<IMG SRC="anim.gif"><B>Bienvenue</B><IMG SRC="anim.gif">'

var side="top"  //Choix du coté: "top", "bottom", "left" ou "right" (haut,bas,gauche,droite)
var width=140	 //Largeur de la zone flottante
var height=20	 //Hauteur de la zone flottante


var t=0;if (navigator.appName == "Netscape") t=1;
if (t) { document.write('<LAYER NAME="mgsr1" width='+width
+' height='+height+'>'+texte+'</LAYER>');
document.captureEvents(Event.MOUSEMOVE);WinX=window.innerWidth;
WinY=window.innerHeight;}else{
document.write('<span ID="mgsr1" STYLE="Position:relative; width='+width
+';height='+height+';">'+texte+'</span>');
WinX=document.body.clientWidth;WinY=document.body.clientHeight;}
function bouge(ev){if(t) {x=ev.pageX-width/2;y=ev.pageY-height/2;}
else {x=event.clientX-width/2;y=event.clientY-height/2;}
if (side=="top") y=0;if (side=="left") x=0;if (side=="right") x=WinX-width;
if (side=="bottom") y=WinY-2*height;if(t)document.mgsr1.moveTo(x,y);
else {with (document.all.mgsr1.style){posLeft=x;posTop=y;};};}
document.onmousemove = bouge;
//-->
</script><BR>
 
INFORMATIONS COMPLEMENTAIRES
top

Comment intégrer ce script dans votre page: Vous pouvez télécharger cette page avec l'image au format zip :télécharger.








Un problème ou une critique : e-mail
Des ressources utiles et gratuites pour vos pages Web :
webgraf.com