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