CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 09 09 12:49:33

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

RAINBOW CURSOR

Information sur la source

Note :

9,17 / 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é :3 156 / 272

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

cursor.gif 22 778 octets
index.html 3 352 octets

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

CURSEUR QUI POINTE LA SOURIS

CURSEUR DYNAMIQUE

Toutes les sources de wackybacky

Sources de la même categorie

VIDEO EN FOND DE PAGE WEB (HTML5) par BarbuJack

EFFET DE TEXTE EN CSS3 par kazma

TRANSFORMATIONS CSS ANIMÉES CROSS-BROWSER AVEC JQUERY par pysco68

DE L'OMBRE par kazma

INFO BULLE NON DESTRUCTIVE par McPeter

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info

CURSEUR QUI POINTE LA SOURIS par wackybacky

CURSEUR DYNAMIQUE par wackybacky

CURSEUR INVISIBLE par abdelaziz_info

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 à 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 ] <li class="style13"><a style="cursor:hand" onclick="changetexte(1)" this.style.cursor = 'hand' >La toile du Quebec</a></li>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

Derniers Blogs

PARUTION DE MON LIVRE SUR WPF 4 par odewit

EDM : COMMENT UTILISER L'HORIZONTAL ENTITY SPLITTING par Matthieu MEZIL

[WP7DEV][REACTIVE] RENDRE LES REACTIVE EXTENSIONS PLUS STABLES par jay

[SHAREPOINT 2010] [VISIO] MANIPULATION N°1 : COMMENT GéNéRER AUTOMATIQUEMENT LA CARTE D'UN SITE WEB AVEC VISIO ? par Patrick Guimonet

WINDBG / SOS / PSSCOR2 : FAILED TO LOAD DATA ACCESS DLL (MSCORDACWKS) par coq

Forum

RE : REMPLIR PLUSIEURS CASES D'UN FORMULAIRE AVEC LE RESULTAT D'UNE SELECTION PROVENANT D'UNE POPUP par patingfree

SWITCH D IMAGE AVEC UN "SELECT" par pl4hs

RE : AFFECTER DES VALEURS à DES COLONNES D'UN TABLEAU par PetoleTeam

RE : OBTENIR LE Z-INDEX D'UN éLéMENT DéFINIT EN CSS par gr43

OBTENIR LE Z-INDEX D'UN éLéMENT DéFINIT EN CSS par gr43

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recherche consultant NET C Sharp
Budget : 12 000€
Integration parametrage formation Question writer 4 Hot potatoes
Budget : 300€
URGENT Creation site vitrine Joomla Laboratoire protheses dentaires
Budget : 600€

Logiciels

Microsoft Office (2010)
MICROSOFT OFFICE (2010)

Microsoft Office 2010 offre de nouveaux moyens flexibles et puissants pour optimiser votre travai...

Cliquez pour télécharger Microsoft Office
SeaMonkey (2.0.7)
SEAMONKEY (2.0.7)

Le projet SeaMonkey est issu d'un effort communautaire pour developper une application tout en un...

Cliquez pour télécharger SeaMonkey
Safari (5.0.2)
SAFARI (5.0.2)

Le navigateur d'Apple a lui aussi été mis à jour, aussi bien dans sa mouture Windows que celle po...

Cliquez pour télécharger Safari
Mozilla FireFox (4.0 béta 5)
MOZILLA FIREFOX (4.0 BéTA 5)

Firefox 4.0 béta 5 L'une des nouveautés visibles les plus attendues réside sans doute dans l'a...

Cliquez pour télécharger Mozilla FireFox
Mozilla Firefox (3.6.9)
MOZILLA FIREFOX (3.6.9)

Firefox 3.6.9 corrige les problèmes suivants : * Introduced support for the X-FRAME-OPTION...

Cliquez pour télécharger Mozilla Firefox