Couleur de fond selon position souris

Commenter

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

S'inscrire maintenant

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.

Du même auteur (mailliam)