Couleur de fond selon position souris

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 353 fois - Téléchargée 15 fois

Contenu du snippet

Un p'tit script qui change la couleur du fond de la page en fonction de la position de la souris.
C'est pas grand chose, en fait comme je n'ai pas trouvé de source sur ce sujet, j'ai fait un petit mixe de ces 2 sources: http://www.javascriptfr.com/codes/CHANGEMENT-COULEUR-DEFILANT_25205.aspx et http://www.javascriptfr.com/codes/FONTION-CONNAITRE-POSITION-SOUS-FIREFOX-AINSI-IE_36734.aspx

Source / Exemple :


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Couleur de souris</title>
</head>
<script type="text/javascript" language="javascript">
function register_position(){
mouse_x = 0;
mouse_y = 0;
document.onmousemove = position;
}

function position(evt){
if(!evt) evt = window.event;
mouse_x = evt.clientX;
mouse_y = evt.clientY;
document.getElementById("coordonnees").innerHTML = "X : "+mouse_x+" ; Y : "+mouse_y;

//ce qui suit defini la couleur en fonction de la position souris
//gestion des x qui change le bleu #FFYYXX
if (mouse_x < 10) {
rouge = "FF";
bleu = "1" + mouse_x; //valeur de 10 a 19
}
else if (mouse_x < 100) {
rouge = "FF";
bleu = mouse_x; //valeur de 10 a 99
}
else if (mouse_x < 1000) {
rouge = "FF";
valeur_x = Math.floor(mouse_x / 10); //divise x par 10 puis l'arrondi à l'entier
bleu = valeur_x; //valeur de 10 a 99
}
else if (mouse_x < 10000) {
rouge = "FF";
valeur_x = Math.floor(mouse_x / 100); //divise x par 100 puis l'arrondi à l'entier
bleu = valeur_x; //valeur de 10 a 99
}

//gestion des y qui change la couleur verte #FFYYXX
if (mouse_y < 10) {
vert = "1" + mouse_y; //valeur de 10 a 19
}
else if (mouse_y < 100) {
vert = mouse_y; //valeur de 10 a 99
}
else if (mouse_y < 1000) {
valeur_y = Math.floor(mouse_y / 10); //divise x par 10 puis l'arrondi à l'entier
vert = valeur_y;
}
else if (mouse_y < 10000) {
valeur_y = Math.floor(mouse_y / 100); //divise x par 100 puis l'arrondi à l'entier
vert = valeur_y;
}

// On defini la variable couleurFond
couleurFond = '#' + rouge + vert + bleu;
// On change la couleur du fond
document.bgColor= couleurFond;

//verification couleurFond:
document.getElementById("verif").innerHTML = "Couleur du fond : "+couleurFond;
}
</script>
<!-- initialise les variables au chargement -->
<body onLoad="javascript:register_position()">
<p>Position mouse : <span id="coordonnees"></span></p>
<p><span id="verif"></span></p>
Sources: http://www.javascriptfr.com/codes/CHANGEMENT-COULEUR-DEFILANT_25205.aspx<br>et http://www.javascriptfr.com/codes/FONTION-CONNAITRE-POSITION-SOUS-FIREFOX-AINSI-IE_36734.aspx
</body>
</html>

A voir également

Ajouter un commentaire

Commentaire

cs_hornetbzz
Messages postés
60
Date d'inscription
lundi 1 décembre 2008
Statut
Membre
Dernière intervention
3 janvier 2011
-
félicitations, bel exercice :-)

D'abord les commentaires "pele-mêle" :
- "switch case" existe aussi en javascript, ça aurait peut-être été mieux adapté en terme de codage (je veux dire par là, mieux que la suite de "if"),
- innerHTML est "capricieux" selon les navigateurs, mieux vaut utiliser le DOM W3C.

Ensuite juste deux petits commentaires perso ou petites idées d'amélioration:
1) ça serait encore plus sympa de "détecter" les objets présents sur la page et d'y attacher un evenement.
En détachant bien les actions qui en découlent. Cela te permettrait d'attacher l'action "x" sur l'evenement "y", et rendrait le script plus universel, et surtout plus portable sur un site existant. Bon j'avoue, je fais un peu ma pub: http://hornetbzz.developpez.com/tutoriels/javascript/dom/

2) Comme seconde amélioration, il y a une manière moins intrusive d'introduire javascript, et que tu pourrais employer facilement. Cette méthode est très bien décrite ici : http://www.pompage.net/pompe/javascript-non-intruisif-chapitre-4/ Là aussi, ça va dans le sens d'un portage facilité dans une appli existante.

bonne continuation :-)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.