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

DHTML
Autour de la souris

  La souris en miroir

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

  Fonction
A quoi ca sert ? A rien !!
Le pointeur de la souris semble avoir son double, qui se balade à l'opposé de l'écran.
  Principe
On a créé des images des différents pointeurs (PC, Mac, IE, Netscape), on détecte les mouvements de la souris sur la page, on déplace un calque selon des cooordonnées basées sur celle de la souris mais 'inversées' (largeur de la zone d'affichage du navigateur moins position gauche du pointeur et de même en vertical).
On peut même envisager la modification de l'image en miroir si le pointeur passe sur un lien en ajoutant une fonction se déclenchant au survol de la souris ('OnMouseOver') qui modifie l'image placée dans le calque.
  Le script
dans la partie <body>
<body OnLoad="pop();">

<!-- Il est nécessaire de créer le calque recevant l'image du pointeur avant d'appeler le script -->
<div id="pointeur" style="position: absolute; left: 0px; top: 0px; z-index: 2"></div>

<script language="JavaScript">
// Détection du navigateur
nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;

// Création d'une variable pour manipuler le calque contenant l'image
var skn;

// Instructions pour Netscape 6
if (nc6) {

// Attribution du nom du calque à la variable
skn = document.getElementById("pointeur");

// Détermination des hauteurs et largeurs disponible dans le navigateur
hauteur = window.innerHeight;
largeur = window.innerWidth;
}

// Instructions pour Netscape 4.x
if (nc4) {
skn = document.pointeur;
hauteur = window.innerHeight;
largeur = window.innerWidth;
}

// Instructions pour Internet Explorer
if (ie4) {
skn = pointeur.style;
hauteur = document.body.clientHeight;
largeur = document.body.clientWidth;
}

// On donne l'ordre au navigateur d'observer les mouvements de la souris
if (nc4) document.captureEvents(Event.MOUSEMOVE);
if (nc6) {
document.addEventListener("mousemove",document.onmousemove,true);
suivre_souris;
}

// Pour chaque mouvement détecté, on lance la fonction qui déplacera le calque
document.onmousemove = suivre_souris;

// Création d'une variable pour insérer l'image dans le calque
var contenu;

// Fonction d'affichage et de remplissage du calque
function pop() {

// On fait varier l'image si on est sur PC ou Mac
if ( navigator.userAgent.indexOf('Mac') != -1) {
contenu = "<img src='demo/images/mac_souris.gif'>";
}
else {
contenu = "<img src='demo/images/souris.gif'>";
}

// Attribution de l'image au calque
// Instructions pour Netscape 6
if (nc6) {
skn.innerHTML = contenu;
skn.style.visibility = "visible";
}

// Instructions pour Netscape 4.x
if (nc4) {
skn.document.write(contenu);
skn.document.close();
skn.visibility = "visible";
}

// Instructions pour Internet Explorer
if (ie4) {
document.all("pointeur").innerHTML = contenu;
skn.visibility = "visible";
}
}

// Fonction de déplacement du calque
function suivre_souris(e) {

// Instructions pour Netscape 6
if (nc6) {

// On créé des variables stockant les coordonnées gauche et haute de la souris
var x = e.pageX + parseInt(skn.style.left);
var y = e.pageY + parseInt(skn.style.top);
}

// Instructions pour Netscape 4.x
if (nc4) {
var x = e.pageX;
var y = e.pageY;
}

// Instructions pour Internet Explorer
if (ie4) {
var x = event.x + document.body.scrollLeft;
var y = event.y + document.body.scrollTop;
}

// Placement du calque pour IE Mac : largeur du navigateur - position gauche du pointeur, de même en vertical
if ( (navigator.userAgent.indexOf('Mac') != -1) && (navigator.userAgent.indexOf('MSIE') != -1) ) {
skn.left = largeur - x;
skn.top = hauteur - y;
}

// Placement du calque pour les autres navigateurs
else {
if (nc6) {
skn.style.left = largeur - x;
skn.style.top = hauteur - y;
}
else {
skn.left = largeur - x;
skn.top = hauteur - y;
}
}
}

// Fonction de modification de l'image dans le calque (non-nécessaire)
// Identique à la fonction 'pop()', on change simplement les appels d'images.
function lien() {
if ( navigator.userAgent.indexOf('Mac') != -1) {
if (navigator.userAgent.indexOf('MSIE') != -1) {
contenu = "<img src='demo/images/mac_souris2ie.gif'>";
}
else {
contenu = "<img src='demo/images/mac_souris2nn.gif'>";
}
}
else {
if (navigator.userAgent.indexOf('MSIE') != -1) {
contenu = "<img src='demo/images/souris2ie.gif'>";
}
else {
contenu = "<img src='demo/images/souris2ie.gif'>";
}
}
if (nc6) {
skn.innerHTML = contenu;
skn.style.visibility = "visible";
}
if (nc4) {
skn.document.write(contenu);
skn.document.close();
skn.visibility = "visible";
}
else if (ie4) {
document.all("pointeur").innerHTML = contenu;
skn.visibility = "visible";
}
}
</script>
  Démonstration

Vous n'avez rien remarqué en haut de cette page ?
Pour voir le changement d'apparence du pointeur en miroir, passez votre souris sur les 5 icones d'accès rapide en haut de la 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_miroir.zip
    3 Ko    		 telechargez le script telechargez le script
    Script séparé :
    sou_miroir2.zip
    3 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