begin process at 2012 05 28 13:12:26
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > COULEUR DE FOND SELON POSITION SOURIS

COULEUR DE FOND SELON POSITION SOURIS


 Information sur la source

Note :
Aucune note
Catégorie :Graphique Classé sous :couleur, souris, fond, coordonnée, position Niveau :Débutant Date de création :11/11/2010 Vu :4 025
Auteur : mailliam

Ecrire un message privé
Commentaire sur cette source (1)
Ajouter un commentaire et/ou une note

 Description

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-COULE UR-DEFILANT_25205.aspx et http://www.javascriptfr.com/codes/FONTION-CONNAITR E-POSITION-SOUS-FIREFOX-AINSI-IE_36734.aspx

Source

  • <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>
<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>



 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

"DRAG" DE BLOC <DIV> par slog9
LIBRAIRIE DE DRAG AND DROP par mickaelpfr
Source avec Zip PROTOTYPE DE DRAG'N DROP par FasteX_
Source avec Zip FONTION POUR CONNAITRE LA POSITION SOUS FIREFOX AINSI QUE IE par julieninformatique
Source avec Zip Source avec une capture TAILLES ET POSITIONS DES OBJETS par bultez

Commentaires et avis

Commentaire de hornetbzz le 15/11/2010 16:05:37

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 :-)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

couleur du texte d'une cellule ou la couleur du fond d'une cellule d'une table [ par rabdane ] J'aimerais avoir un javascript qui change la couleur du texte d'une cellule ou la couleur du fond d'une cellule d'une table appelé TABLE1.cette table Scrollbar remplie par un fond autre qu'une couleur [ par Krokodyle ] Salut,Je me demandais s'il y avait possibilité de personnaliser la scrollbar de son site web à l'aide d'un fond de type jpeg ou gif au lieu d'un code changer de couleur la cellule quand la souris vient et part [ par Stephane ] salut a tousvoila je connais pas trop javascript, alors je me sert des sources qu'il y a, mais y a un truc qu'il n'y est pas :Comment peut on changer position de la souris sur une image [ par golgoth ] Bonjour,Comment faire pour recuperer dans un lien la position de la souris sur une image quand je clic sur celle-ci ? Est ce possible ?Merci pour votr Modifier position de la souris [ par schub1015 ] Bonjour,j'aimerais savoir s'il est possible de modifier la position de la souris ?Merci pour vos réponses. Couleur du champ texte [ par iomega ] Bonjour à tous,j'ai un champ texte qui doit changer de couleur d'après l'événement onclick c'est-à-dire que si le fond du champ est en rouge qu'il me Texte changeant de couleur lors du survol souris [ par abdonabil ] bonjour,je veux un petit script qui permetra de changer la couleur d'un texte lors du survol du pointeur , sachant que ce texte est un lien.merci d'av 2 couleurs d'une cellule sur clic [ par matos_deluxe ] Salut, je voudrais changer la couleur du fond d'une cellule d'un tableau html sur l'action 'clic' MAIS lorsque je reclic sur la cellule un seconde foi Changement de couleur d'une colonne au passage de la souris [ par Ma2004 ] Hello &#224; tous !Ma question est la suivante:Comment fait on pour changer simplement la couleur d'un &lt;td&gt; (dans un tableau donc) lorsque la so Changer la couleur de fond d'un champ texte d'un formulaire [ par JeanMi66 ] Bonjour, comme le titre le dit, je voudrais changer la couleur de fond d'un champ de sasie de texte d'un formulaire. Voil&#224; ma page mais &#231;a


Nos sponsors


Sondage...

Comparez les prix


Motorola MILESTONE
Entre 489€ et 489€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,998 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)