|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 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.
 Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
 Télécharger le zip
 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
Sources en rapport avec celle ci
 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
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
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 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
|
 Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
|