Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

DHTML
Autour de la souris

  Un texte à droite du pointeur

fonction  principe  la methode elle-meme  demonstration  telechargement de la methode  Compatibilite du script... a partir de : 

  Fonction
A quoi ca sert ? A rien !!
Un texte suit les mouvements de votre souris sur l'écran.
  Principe
Le texte choisi est séparé lettre à lettre puis chaque lettre est placée sur un calque.
Le mouvement de la souris est constamment analysé pour déplacer chaque calque en fonction des mouvements de la souris.
  Le script
dans la partie <head>
<script language="JavaScript">
var x,y;
var espace = 8;
var flag = 0;

var message = "Fete de l'internet 2001 !! ";
message = message.split("");

var xpos = new Array();
for ( i = 0; i <= message.length-1; i++ ) {
xpos[i] = -50;
}
var ypos = new Array();
for ( i = 0; i <= message.length-1; i++ ) {
ypos[i] = -50;
}

function gestion_move(s){
x = (document.layers) ? s.pageX : document.body.scrollLeft + event.clientX;
y = (document.layers) ? s.pageY : document.body.scrollTop + event.clientY;
flag = 1;
}

function gestion_drapeau() {
if ( flag == 1 && document.all ) {
for ( i = message.length-1; i >= 1; i-- ) {
xpos[i] = xpos[i-1] + espace;
ypos[i] = ypos[i-1];
}
xpos[0] = x + espace;
ypos[0] = y;
for ( i = 0; i < message.length-1; i++ ) {
var calque = eval("caractere_" + (i) + ".style");
calque.posLeft = xpos[i];
calque.posTop = ypos[i];
}
}
else if ( flag == 1 && document.layers ) {
for ( i = message.length-1; i >= 1; i-- ) {
xpos[i] = xpos[i-1] + espace;
ypos[i] = ypos[i-1];
}
xpos[0] = x + espace;
ypos[0] = y;
for ( i = 0; i < message.length-1; i++ ) {
var calque = eval("document.caractere_" + i);
calque.left = xpos[i];
calque.top = ypos[i];
}
}
setTimeout("gestion_drapeau()",50);
}
</script>

<style>
.apparence { font-family: arial; font-size: 12px; color: #0066CC; visibility: visible; position: absolute; top: -50px; }
</style>

dans la partie <body>
<body OnLoad="gestion_drapeau();">
<script language="JavaScript">
for ( i = 0; i <= message.length-1; i++ ) {
document.write("<span id='caractere_" + i + "' class='apparence'>" + message[i] + "</span>");
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = gestion_move;
</script>
  Démonstration

Vous n'avez rien remarqué sur cette page ?
  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
    		•
    Script intégré :
    sou_texte_h.zip
    1 Ko    		 telechargez le script telechargez le script
    Script séparé :
    sou_texte_h2.zip
    2 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter