Accueil > > > CURSEUR QUI POINTE LA SOURIS
CURSEUR QUI POINTE LA SOURIS
Information sur la source
Description
Dans la série des codes pas très utiles mais qui font toujours effet (dans un menu circulaire par exemple), voici donc un script (compatible IE & FF comme tjrs) qui, lors de l'appel de la fonction arrow360(), inclus dans la page un élément DIV dont le background est un curseur qui pointe la souris (en utilisant le système de tiroir)... génial me direz-vous! même moi je me demande encore pourquoi j'ai fais ça... bref, la fonction retourne l'objet DIV et vous pourrez le modifier si besoin est. Bonne exploitation à vous! laissez moi vos avis svp.
Source
- <html>
- <head>
- <title>Arrow360</title>
- </head>
- <body bgcolor="#92BFEB">
-
- <script language="JavaScript">
-
- //-> Créé & retourne un objet HTML de type [tag] dans [parent]
- function HTMLobject(tag, parent){
- var div, obj = document.createElement(tag);
- if(parent){parent.appendChild(obj);} else{
- document.write("<div id=target></div>");
- div = document.getElementById("target");
- div.parentNode.replaceChild(obj, div);};
- return obj;};
-
- //-> Retourne la position LEFT & TOP relative à body de [l'objet]
- function Left(obj){
- return (!obj.offsetParent)? obj.offsetLeft:
- obj.offsetLeft + Left(obj.offsetParent);};
- function Top(obj){
- return (!obj.offsetParent)? obj.offsetTop:
- obj.offsetTop + Top(obj.offsetParent);};
-
- //-> Assigne les coordonées du curseur à la variable mouse.{x,y}
- var Mouse = {x: 0, y: 0};
- document.onmousemove = function(e){
- Mouse = (e)? {x: e.pageX, y: e.pageY}:
- {x: event.x + document.body.scrollLeft,
- y: event.y + document.body.scrollTop};};
-
- //-> Créé & retourne un objet div dont le background pointe mouse
- var Arrow360 = new Object();
- Arrow360.item = new Array();
- Arrow360.move = function(){
- for(var i in Arrow360.item){
- if(Arrow360.item[i].active)
- Arrow360.item[i].move();};};
- Arrow360.create = function(angle){
- var obj = HTMLobject("div");
- obj.image = "url(arrow360.gif)";
- obj.style.width = "30px";
- obj.style.height = "30px";
- obj.x = obj.offsetWidth / 2 + Left(obj);
- obj.y = obj.offsetHeight / 2 + Top(obj);
- obj.move = function(angle){ if(!angle){
- var dx = Mouse.x-obj.x, dy = obj.y-Mouse.y;
- angle = Math.atan2(dy, dx) * 180/Math.PI;};
- angle = (angle>355)? angle-355: angle+5;
- var moveX = " " + 30*(-Math.floor(angle/10)%9) + "px",
- moveY = " " + 30*(-Math.floor(angle/90)) + "px";
- obj.style.background = obj.image + moveX + moveY;};
- obj.active = (angle)? false: true; if(angle) obj.move(angle);
- obj.onclick = function(){obj.active = (!obj.active);};
- obj.ondblclick = function(){Arrow360.timer = (Arrow360.timer)?
- clearInterval(Arrow360.timer): setInterval(Arrow360.move, 10);};
- Arrow360.item.push(obj); return obj;};
-
- Arrow360.timer = setInterval(Arrow360.move, 10);
- </script>
-
- <div align="center" style="width: 100%; margin-top: 200px">
- <script language="JavaScript">
- var test1 = Arrow360.create();
- var test2 = Arrow360.create();
- var test3 = Arrow360.create();
- var test4 = Arrow360.create();
- var test5 = Arrow360.create(50);
- var test6 = Arrow360.create(60);
- var test7 = Arrow360.create(70);
- var test8 = Arrow360.create(80);
- var test9 = Arrow360.create(90);
- </script>
- </div>
-
- <!-- test = DIV contenant la flèche / style modifiable -->
- <!-- un click sur le DIV fait stopper la flèche (OUF!) -->
- <!-- un dblclick sur un DIV fige tous les autres DIV -->
-
- </body>
- </html>
<html>
<head>
<title>Arrow360</title>
</head>
<body bgcolor="#92BFEB">
<script language="JavaScript">
//-> Créé & retourne un objet HTML de type [tag] dans [parent]
function HTMLobject(tag, parent){
var div, obj = document.createElement(tag);
if(parent){parent.appendChild(obj);} else{
document.write("<div id=target></div>");
div = document.getElementById("target");
div.parentNode.replaceChild(obj, div);};
return obj;};
//-> Retourne la position LEFT & TOP relative à body de [l'objet]
function Left(obj){
return (!obj.offsetParent)? obj.offsetLeft:
obj.offsetLeft + Left(obj.offsetParent);};
function Top(obj){
return (!obj.offsetParent)? obj.offsetTop:
obj.offsetTop + Top(obj.offsetParent);};
//-> Assigne les coordonées du curseur à la variable mouse.{x,y}
var Mouse = {x: 0, y: 0};
document.onmousemove = function(e){
Mouse = (e)? {x: e.pageX, y: e.pageY}:
{x: event.x + document.body.scrollLeft,
y: event.y + document.body.scrollTop};};
//-> Créé & retourne un objet div dont le background pointe mouse
var Arrow360 = new Object();
Arrow360.item = new Array();
Arrow360.move = function(){
for(var i in Arrow360.item){
if(Arrow360.item[i].active)
Arrow360.item[i].move();};};
Arrow360.create = function(angle){
var obj = HTMLobject("div");
obj.image = "url(arrow360.gif)";
obj.style.width = "30px";
obj.style.height = "30px";
obj.x = obj.offsetWidth / 2 + Left(obj);
obj.y = obj.offsetHeight / 2 + Top(obj);
obj.move = function(angle){ if(!angle){
var dx = Mouse.x-obj.x, dy = obj.y-Mouse.y;
angle = Math.atan2(dy, dx) * 180/Math.PI;};
angle = (angle>355)? angle-355: angle+5;
var moveX = " " + 30*(-Math.floor(angle/10)%9) + "px",
moveY = " " + 30*(-Math.floor(angle/90)) + "px";
obj.style.background = obj.image + moveX + moveY;};
obj.active = (angle)? false: true; if(angle) obj.move(angle);
obj.onclick = function(){obj.active = (!obj.active);};
obj.ondblclick = function(){Arrow360.timer = (Arrow360.timer)?
clearInterval(Arrow360.timer): setInterval(Arrow360.move, 10);};
Arrow360.item.push(obj); return obj;};
Arrow360.timer = setInterval(Arrow360.move, 10);
</script>
<div align="center" style="width: 100%; margin-top: 200px">
<script language="JavaScript">
var test1 = Arrow360.create();
var test2 = Arrow360.create();
var test3 = Arrow360.create();
var test4 = Arrow360.create();
var test5 = Arrow360.create(50);
var test6 = Arrow360.create(60);
var test7 = Arrow360.create(70);
var test8 = Arrow360.create(80);
var test9 = Arrow360.create(90);
</script>
</div>
<!-- test = DIV contenant la flèche / style modifiable -->
<!-- un click sur le DIV fait stopper la flèche (OUF!) -->
<!-- un dblclick sur un DIV fige tous les autres DIV -->
</body>
</html>
Conclusion
Un bug connu pour lequel j'ai la flème de le corriger: au redimentionnement d'une fenêtre, la position relative de l'objet DIV (par rapport à BODY) n'est pas recalculée... bref ça fait un point de rotation ailleurs que là où il faudrait... je vous laisse vous en charger.
Historique
- 17 avril 2008 16:01:27 :
- P.S. J'ai abandonné le .png car IE ne permet pas le système de tiroir avec le filtre de transparence
- 17 avril 2008 16:21:41 :
- J'oubliais: le script est évidement conçu pour en mettre autant qu'on veut sur la page seulement FF n'aime pas trop les setInterval et vu qu'il y en a un pour chaque div crée, plus t'en met, et plus FF déguste, alors faites vous plaisir.
- 18 avril 2008 16:40:31 :
- Prise en compte des commentaires postés:
- fonction AngPol() remplacée par Math.atan2()
- gestion de toutes les div par un seul timer
- J'ai rajouté le .psd dans le zip, ça peut vous être utile :)
Merci aux 2 posteurs
- 18 avril 2008 17:01:48 :
- Petite rectification: possibilité d'insérer une flèche en statique en passant comme paramètre l'angle désiré...
Sources du même auteur
Sources de la même categorie
Commentaires et avis
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
|
Derniers Blogs
[SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko [FRAMEWORK 4] LES TASKS ET LE THREAD UI[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi
Je viens de passer quelques temps au TechDay's et j'ai pu voir pas mal de session intéressante. Par contre une chose m'a un peu étonné lors de certaines de ces sessions qui abordaient les améliorations du framework .NET (donc le 4.5) : en gros, bea...
Cliquez pour lire la suite de l'article par fathi WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBEWORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson
Depuis déjà un an, je conseille vivement les utilisateurs de Workflow Foundation 3 à migrer vers la version 4. L'information qui va suivre ne devrait donc pas trop prendre au dépourvu les personnes qui m'ont suivi. Je profite de ce poste, pour faire le re...
Cliquez pour lire la suite de l'article par JeremyJeanson
Logiciels
Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|