begin process at 2010 02 10 13:21:11
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > RAINBOW CURSOR

RAINBOW CURSOR


 Information sur la source

Note :
9,17 / 10 - par 6 personnes
9,17 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :curseur, souris, rotation, tiroir, background Niveau :Initié Date de création :22/06/2009 Date de mise à jour :23/06/2009 12:30:03 Vu / téléchargé :2 429 / 244
Auteur : wackybacky

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

 Description

Cliquez pour voir la capture en taille normale
Petite amélioration du précédent script que je vous avais proposé (curseur qui pointe la souris: http://www.javascriptfr.com/codes/CURSEUR-POINTE-S OURIS_46389.aspx)
Cette fois ci, le code est optimisé, il y a plus de précision sur les curseurs (une image tous les 4,5°) et j'ai inséré une petite touche de couleur (d'où le titre Rainbow Cursor).
Le script en lui même n'a toujours pas trouvé son intérêt mais cela permet de mieux comprendre la rotation en javascript. Si quelqu'un y trouve son utilité, qu'il me fasse signe :D

Source

  • <html>
  • <head>
  • <title>Rainbow cursors</title>
  • <style type="text/css">
  • div.cursor {
  • width: 30px; height: 30px; border: 0px; margin: 0px; padding: 0px; overflow: hidden; background-image: url(cursor.gif);
  • }
  • </style>
  • <script type="text/javascript">
  • //===[ Ajoute une fonction à un évènement ]=======================================//
  • function addEvent(obj, ev, fx){
  • if(obj.addEventListener){obj.addEventListener(ev, fx, false);}
  • else if(obj.attachEvent){obj.attachEvent('on' + ev, fx);};};
  • //===[ Capture la position de la souris ]=========================================//
  • var mouse = {x: 0, y: 0};
  • addEvent(document, "mousemove", function(e){ e = e || window.event;
  • mouse.x = !isNaN(e.pageX)? e.pageX : e.x + document.body.scrollLeft;
  • mouse.y = !isNaN(e.pageY)? e.pageY : e.y + document.body.scrollTop;});
  • //===[ Liste tous les objets DIV de class "cursor" ]==============================//
  • var cursors = new Array();
  • function getCursors(){ var divs = document.getElementsByTagName("div");
  • for(var i in divs){ if(divs[i].className == "cursor"){cursors.push(divs[i]);};};};
  • addEvent(window, "load", getCursors);
  • //===[ Retourne les coordonnées absolues d'un objet ]=============================//
  • function Left(obj){
  • return obj.offsetLeft + ((!obj.offsetParent)? 0: Left(obj.offsetParent));};
  • function Top(obj){
  • return obj.offsetTop + ((!obj.offsetParent)? 0: Top(obj.offsetParent));};
  • //===[ Active / Calcule la rotation des curseurs ]================================//
  • function moveCursors(){ var i, x, y, z; for(i in cursors){
  • x = mouse.x - Left(cursors[i]) - (cursors[i].offsetWidth/2);
  • y = Top(cursors[i]) + (cursors[i].offsetHeight/2) - mouse.y;
  • z = Math.atan2(y, x) * 180 / Math.PI;
  • x = -30 * Math.floor(z % 40.5 / 4.5) + "px ";
  • y = -30 * Math.floor(z / 40.5) + "px";
  • cursors[i].style.backgroundPosition = x + y;};};
  • addEvent(document, "mousemove", moveCursors);
  • </script>
  • </head>
  • <body>
  • <!-- Pour créer un nouveau curseur, ajouter une DIV de class "cursor" -->
  • <div class="cursor" style="position: absolute; left: 500px; top: 200px"></div>
  • <div class="cursor" style="position: absolute; left: 530px; top: 200px"></div>
  • <div class="cursor" style="position: absolute; left: 560px; top: 200px"></div>
  • <div class="cursor" style="position: absolute; left: 590px; top: 200px"></div>
  • <div class="cursor" style="position: absolute; left: 500px; top: 230px"></div>
  • <div class="cursor" style="position: absolute; left: 530px; top: 230px"></div>
  • <div class="cursor" style="position: absolute; left: 560px; top: 230px"></div>
  • <div class="cursor" style="position: absolute; left: 590px; top: 230px"></div>
  • <div class="cursor" style="position: absolute; left: 500px; top: 260px"></div>
  • <div class="cursor" style="position: absolute; left: 530px; top: 260px"></div>
  • <div class="cursor" style="position: absolute; left: 560px; top: 260px"></div>
  • <div class="cursor" style="position: absolute; left: 590px; top: 260px"></div>
  • <div class="cursor" style="position: absolute; left: 500px; top: 290px"></div>
  • <div class="cursor" style="position: absolute; left: 530px; top: 290px"></div>
  • <div class="cursor" style="position: absolute; left: 560px; top: 290px"></div>
  • <div class="cursor" style="position: absolute; left: 590px; top: 290px"></div>
  • </body>
  • </html>
<html>
<head>
  <title>Rainbow cursors</title>
<style type="text/css">
div.cursor {
  width: 30px; height: 30px; border: 0px; margin: 0px; padding: 0px; overflow: hidden; background-image: url(cursor.gif);
}
</style>
<script type="text/javascript">

//===[ Ajoute une fonction à un évènement ]=======================================//
function addEvent(obj, ev, fx){
  if(obj.addEventListener){obj.addEventListener(ev, fx, false);}
  else if(obj.attachEvent){obj.attachEvent('on' + ev, fx);};};

//===[ Capture la position de la souris ]=========================================//
var mouse = {x: 0, y: 0};
addEvent(document, "mousemove", function(e){ e = e || window.event;
  mouse.x = !isNaN(e.pageX)? e.pageX : e.x + document.body.scrollLeft;
  mouse.y = !isNaN(e.pageY)? e.pageY : e.y + document.body.scrollTop;});

//===[ Liste tous les objets DIV de class "cursor" ]==============================//
var cursors = new Array();
function getCursors(){ var divs = document.getElementsByTagName("div");
  for(var i in divs){ if(divs[i].className == "cursor"){cursors.push(divs[i]);};};};
addEvent(window, "load", getCursors);

//===[ Retourne les coordonnées absolues d'un objet ]=============================//
function Left(obj){
  return obj.offsetLeft + ((!obj.offsetParent)? 0: Left(obj.offsetParent));};
function Top(obj){
  return obj.offsetTop + ((!obj.offsetParent)? 0: Top(obj.offsetParent));};

//===[ Active / Calcule la rotation des curseurs ]================================//
function moveCursors(){ var i, x, y, z; for(i in cursors){
  x = mouse.x - Left(cursors[i]) - (cursors[i].offsetWidth/2);
  y = Top(cursors[i]) + (cursors[i].offsetHeight/2) - mouse.y;
  z = Math.atan2(y, x) * 180 / Math.PI;
  x = -30 * Math.floor(z % 40.5 / 4.5) + "px ";
  y = -30 * Math.floor(z / 40.5) + "px";
  cursors[i].style.backgroundPosition = x + y;};};
addEvent(document, "mousemove", moveCursors);

</script>
</head>
<body>

<!-- Pour créer un nouveau curseur, ajouter une DIV de class "cursor" -->
<div class="cursor" style="position: absolute; left: 500px; top: 200px"></div>
<div class="cursor" style="position: absolute; left: 530px; top: 200px"></div>
<div class="cursor" style="position: absolute; left: 560px; top: 200px"></div>
<div class="cursor" style="position: absolute; left: 590px; top: 200px"></div>
<div class="cursor" style="position: absolute; left: 500px; top: 230px"></div>
<div class="cursor" style="position: absolute; left: 530px; top: 230px"></div>
<div class="cursor" style="position: absolute; left: 560px; top: 230px"></div>
<div class="cursor" style="position: absolute; left: 590px; top: 230px"></div>
<div class="cursor" style="position: absolute; left: 500px; top: 260px"></div>
<div class="cursor" style="position: absolute; left: 530px; top: 260px"></div>
<div class="cursor" style="position: absolute; left: 560px; top: 260px"></div>
<div class="cursor" style="position: absolute; left: 590px; top: 260px"></div>
<div class="cursor" style="position: absolute; left: 500px; top: 290px"></div>
<div class="cursor" style="position: absolute; left: 530px; top: 290px"></div>
<div class="cursor" style="position: absolute; left: 560px; top: 290px"></div>
<div class="cursor" style="position: absolute; left: 590px; top: 290px"></div>

</body>
</html>


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

23 juin 2009 11:54:31 :
Commentaires ajoutés ;)
23 juin 2009 12:30:03 :
petit rectificatif au niveau du code

 Sources du même auteur

Source avec Zip Source avec une capture CURSEUR QUI POINTE LA SOURIS
Source avec Zip Source avec une capture CURSEUR DYNAMIQUE
Toutes les sources de wackybacky

 Sources de la même categorie

Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info
Source avec Zip Source avec une capture CURSEUR QUI POINTE LA SOURIS par wackybacky
Source avec Zip Source avec une capture CURSEUR DYNAMIQUE par wackybacky
Source avec Zip CURSEUR INVISIBLE par abdelaziz_info
Source avec Zip CURSEUR ENTOURÉ DE FLEURS par abdelaziz_info

Commentaires et avis

Commentaire de lakichemole le 23/06/2009 10:27:54 7/10

Je suis fan :), manque un peut de commentaires !

Commentaire de mickaelpfr le 24/06/2009 11:18:45 10/10

Juste excellent , code propre ( pas testé sous ie ... ) !!
très bien l'utilisation d'un fichier unique pour les images :)

allez une note maximum pour le style !

Commentaire de wackybacky le 24/06/2009 22:32:46

merci bcp! je réfléchis pour savoir à quoi cela pourrait bien servir lol

Commentaire de Julien39 le 26/06/2009 16:34:53 10/10

Oui, manque de commentaires mais comme le script est court ca va. Et c'est joli.
10/10

Commentaire de Yanonix le 29/06/2009 15:05:15

Salut,
Juste pour dire qu'avec Firefox 3.5, on peut donner un angle très précis pour faire tourner n'importe quel objet (video, div, etc...) donc tourner ton image de souris très précisément et ainsi avec une seule et unique image.
-moz-transform: rotate(90deg);
http://ljouanneau.com/blog/post/2008/09/15/821-transformations-en-css3

Commentaire de wackybacky le 29/06/2009 15:42:15

Article très intéressant! merci yanonix. Mais est-ce supporté par tous les navigateurs et est-ce conforme au W3C?

Commentaire de SapherEmbended0 le 30/06/2009 14:09:32 8/10

Le code est bien, une bonne démo, j'aime bien ^^, je mets 8.

Commentaire de Yanonix le 30/06/2009 18:17:03

Que pour Firefox (d'où le -moz ), mais il me semble que ça sera intégré au CSS3, donc faudra juste attendre la validation pour le W3C

Commentaire de gunjack le 13/07/2009 11:41:50 10/10

juste un mot : bluffant !!

j'adore

Commentaire de sitajony le 26/08/2009 01:00:05 10/10

mdr Sa ma surprit lol C'est super lol Sa sert prèsque à rien mais c'est marant lol Moi je pense que je vais en mettre une flèche à chaque coin de mon site lol je pense que les visiteurs vont rester plus longtemp à s'amuser avec les flèches lol...

Commentaire de sitajony le 26/08/2009 01:00:50

Euh je viens juste de remarquer que je mets beaucoup de "lol" lol...

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Est il possible de changer le curseur de la souris [ par pedro ] Slt,J'aimerais savoir si il est possible de changer le curseur de la souris sur une page web.Merci@+Pedro changer l'apparence du curseur souris [ par Ma2004 ] Salut &#224; tous !Savez vous comment changer l'apparence du curseur de la souris lorsqu'elle passe sur une image, sur un lien ou autre ?Je voudrais q curseur de souris ( mouse hand) commment faire sous firefox [ par Jolan123 ] &lt;li class="style13"&gt;&lt;a style="cursor:hand" onclick="changetexte(1)" this.style.cursor = 'hand' &gt;La toile du Quebec&lt;/a&gt;&lt;/li&gt;ca remplacer le curseur de la souris sur mon site par un ptit dessin animé(.gif) [ par nico454545 ] Bonjour,je ne sais pas si je suis au bon endroit pour parler de ça, alors voilà tout de meme, j'aimerais  remplacer le curseur de la souris sur mon si curseur de souris, mettre un gif [ par RastaToon ] Bonjour,Je souhaiterais utiliser le javascript ci-dessous mais en utilisant mon propre gif animé. Est-ce possible ?Merci à tousdocument.getElementsByT Curseur de la souris sur un bouton. [ par overstorex ] Bonsoir, j'aurai voulu savoir si il est possible si le curseur de la souris ce trouve sur le bouton celui-ci change de couleur ? Centrer background en JavaScript [ par forget2212 ] Bonsoir, J'ai un site web qui fonctionne en CSS et je veux introduire du JS pour le bas de la page (copyright) sur toutes mes pages. Mon fichier c Position du curseur dans une div [ par Dj Nam ] Bonjour tout le monde,Dans le cadre de développement d'un site web, j'aimerais tranformer une div en textarea, pour cela j'utilise le javascript car j Récupérer la position du curseur dans un TEXTAREA [ par piment ] Comment récupérer la position du curseur dans un textarea ou la position en nombre de caractère depuis le début.Merci Pointeur de souris [ par Freddy ] Bonjour a tousvoila mon souci, dans un formulaire contenant des boites de saisieje voudrais que par défaut mon curseur de sourisce positionne automati


Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy I7500 (8 Go)
Entre 129€ et 575€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
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,749 sec (3)

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)