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

Code

 > 

Menu & Co

 > CURSEUR QUI POINTE LA SOURIS

CURSEUR QUI POINTE LA SOURIS


 Information sur la source

Note :
Aucune note
Catégorie :Menu & Co Classé sous :curseur, souris, rotation, tiroir, background Niveau :Initié Date de création :17/04/2008 Date de mise à jour :18/04/2008 17:01:48 Vu / téléchargé :8 514 / 263
Auteur : wackybacky

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

 Description

Cliquez pour voir la capture en taille normale
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

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

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

Source avec Zip Source avec une capture RAINBOW CURSOR
Source avec Zip Source avec une capture CURSEUR DYNAMIQUE
Toutes les sources de wackybacky

 Sources de la même categorie

Source avec Zip Source avec une capture MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma
Source avec Zip Source avec une capture MENU VERTICALE EN TRANSPARENCE par dlvains
Source avec Zip Source avec une capture MENU DÉROULANT EN IMAGES par dlvains
Source avec Zip TBFRAME: TAB BROWSING FRAME par triumphs
Source avec Zip Source avec une capture MENU PRINCIPAL par ali1987
Toutes les sources de la catégorie Menu & Co

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture RAINBOW CURSOR par wackybacky
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 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 FraGag le 18/04/2008 05:00:57

Ta fonction AngPol, en fait, c'est atan2 ?
http://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core:Objets_globaux:Math:atan2
(Attention, l'ordre des arguments est inversé.)

Commentaire de lakichemole le 18/04/2008 10:06:13

Excelent reste plus qu'à trouver une utilité ^^
Mais le rendu est pas mal(fluide)!
Sinon pour ton setInterval pourquoi tu ne fait pas une fonction qui gère plusieurs curseurs et qui les rafraichie une fois tous enssemble?
genre  une globale var objArrow = new Array(); que tu remplis à chaque new Arrow360 et tu appel une méthode à part dans ton setInterval du genre setInterval(changeAllAngle,10);
function changeAllAngle
{
   for(i=0;i<objArrow.length;i++){objArrow[i].changeAngle;}
}
Enfin je dis ça je dis rien y a peut être des truc auquel j'ai pas pensé :) Mais je pense que si tu le fait et que t'en mais une bonne centaine sur une page y a moyen de faire un truc psychadelic :)

Commentaire de wackybacky le 18/04/2008 10:21:25

Merci FraGag, c'est effectivement la fonction atan2(y, x) (que je ne connaissait pas) on en apprend tous les jours :). Pour LAKICHEMOLE, j'ai bien pensé à utiliser un timer commun pour toutes les flèches... c'est juste que je ne sais pas quoi faire comme "action utilisateur" pour stopper les flèches (si celles-ci lui bouffent trop de cpu): peut-être qu'un clique sur une seule les arrêterait toutes? A voir...

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

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,624 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)