Newsgroup: it.comp.lang.javascript
Titolo: Movimento del mouse (NON MALE)

Qualcuno sa spiegare come funziona l'effetto che fa il mouse nella
pagina della Philips:
http://www.philips.com
ciao e grazie
-- 
Io non so se Dio esiste, ma se non siste ci fa una figura migliore.
(Stefno Benni)
----------------------------------------------------------------------------------
  ____  ____  ____  _  _
 / ___)| __ \/ ___)/ /| | Ivan Marcialis - 
Ci...@crs4.it
| (___ |    /\___ \\__  | TEL: 
+39 070 2796
.311 ICQ: 22707775
 \____)|_|\_\(____/   |_| 
http://gagarin.crs4.it:8080/

 
http://www.philips.com
Davvero carino.
Ho isolato lo script non ho avuto ancora tempo di studiarlo, lo faro' quando
avro' tempo:
allora, tra <head> e </head> ci devi mettere
<style><!--
  #trailsprite1 { position: absolute; z-index: 100; top: 1px; left: 0px;
width: 10px; height: 10px; visibility: visible }
  #trailsprite2 { position: absolute; z-index: 10; top: 0px; left: 0px;
width: 10px; height: 10px; visibility: visible }
  #trailsprite3 { position: absolute; z-index: 10; top: 0px; left: 0px;
width: 10px; height: 10px; visibility: visible }
  #trailsprite4 { position: absolute; z-index: 10; top: 0px; left: 0px;
width: 10px; height: 10px; visibility: visible }
  #trailsprite5 { position: absolute; z-index: 10; top: 0px; left: 0px;
width: 10px; height: 10px; visibility: visible }
  #trailsprite6 { position: absolute; z-index: 10; top: 0px; left: 0px;
width: 10px; height: 10px; visibility: visible }
-->
 </style>
 <script language="JavaScript">
 <!-- Hide from browsers that don't know JavaScript
 var version = 0;
  if (navigator.userAgent.indexOf("MSIE 4") != -1)  version = 5;
  else if
  (navigator.userAgent.indexOf("MSIE 3") != -1)  version = 1;
  else if
  (navigator.userAgent.indexOf("Mozilla/4") != -1)  version = 4;
  else if
  (navigator.userAgent.indexOf("Mozilla/4.5") != -1)  version = 7;
  else if
  (navigator.userAgent.indexOf("Mozilla/3") != -1)  version = 3;
  else if
  (navigator.userAgent.indexOf("Mozilla/2") != -1)  version = 2;
  else if
  (navigator.userAgent.indexOf("MSIE 4.5") != -1)  version = 6;
  else version = 8;
 // -->
 </script>
I CSS sono necessari, perche' le stelline vengono inseriti nei div qui sopra
definiti, mentre lo script determina il tipo di browser.
Nel body poi devi inserire quest'altro script:
<SCRIPT LANGUAGE="JavaScript1.1">
 if (version > 3)
// OCCHIO CHE QUESTO VA SU UN'UNICA RIGA!!!!
  document.write('<div id="trailSprite1"><img src="trailgif5.gif"
height="10" width="10" border="0" name="trailSprite1img"></div><div
id="trailSprite2"><img src="trailgif5.gif" height="10" width="10" border="0"
name="trailSprite2img"></div><div id="trailSprite3"><img src="trailgif5.gif"
height="10" width="10" border="0" name="trailSprite3img"></div><div
id="trailSprite4"><img src="trailgif5.gif" height="10" width="10" border="0"
name="trailSprite4img"></div><div id="trailSprite5"><img src="trailgif5.gif"
height="10" width="10" border="0" name="trailSprite5img"></div><div
id="trailSprite6"><img src="trailgif5.gif" height="10" width="10" border="0"
name="trailSprite6img"></div>');
// FIN QUI!
 var isNS = (navigator.appName == "Netscape");
 layerRef = (isNS) ? "document" : "document.all";
 styleRef = (isNS) ? "" : ".style";
 var queue = new Array();
 var NUM_OF_TRAIL_PARTS = 6
 for (x=1; x < 7; x++) {  ///////////////Image Preload
  eval("trailSpriteFrame" + x + " = new Image(10,10);");
  eval("trailSpriteFrame" + x + ".src = 'trailgif" + x + ".gif';");
 }
 ////////////////////////////////////////////////The trail Object
 function trailSpriteObj(anID) {
  this.trailSpriteID = "trailSprite" + anID; // as before
  this.imgRef = "trailSprite" + anID + "img"; // reference to the sprites
image name
  this.currentFrame = 1; // the varible for looking after the frame
  this.animateTrailSprite = animateTrailSprite; // declare the objects
method cycle
 }
 function animateTrailSprite() {
  if (this.currentFrame <7) { // if there are animation frames left, the
change sprites the current frame
   if (isNS) {    // Detect the browser and perform coresponding image
switch
    eval("document['"+ this.imgRef + "'].src  =  trailSpriteFrame" +
this.currentFrame + ".src");
   } else {
    eval("document['" + this.imgRef + "'].src  =  trailSpriteFrame" +
this.currentFrame + ".src");
   }
   this.currentFrame ++;  // and increase the objects current frame
  } else {      // the current frame has reached its limit so hide the
sprite
   eval(layerRef + '.' + this.trailSpriteID +  styleRef + '.visibility =
"hidden"');
  }
 }
 /////////////////////////////////////////////////////////////////
 function processAnim() {
  for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
   queue[x].animateTrailSprite();
 }
 function processMouse(e) {
  currentObj = shuffleQueue();
  if (isNS) {
   eval("document." + currentObj + ".left = e.pageX - 0 ;");
   eval("document." + currentObj + ".top = e.pageY + 5;");
  } else {
   eval("document.all." + currentObj + ".style.pixelLeft = event.clientX +
document.body.scrollLeft - 0 ;");
   eval("document.all." + currentObj + ".style.pixelTop = event.clientY +
document.body.scrollTop + 5;");
  }
 }
 function shuffleQueue() {
  lastItemPos = queue.length - 1;
  lastItem = queue[lastItemPos];
  for (i = lastItemPos; i>0; i--)
   queue[i] = queue[i-1];
  queue[0] = lastItem;
  queue[0].currentFrame = 1; // reset the objects frame number & make the
sprite visible again
  eval(layerRef + '.' + queue[0].trailSpriteID +  styleRef + '.visibility =
"visible"');
  return  queue[0].trailSpriteID;
 }
 function init() {
  for(x=0; x<NUM_OF_TRAIL_PARTS; x++)  // fill array with trail objects
   queue[x] = new trailSpriteObj(x+1) ;
  if (isNS) { document.captureEvents(Event.MOUSEMOVE); }
  document.onmousemove = processMouse;
  setInterval("processAnim();",25);
 }
 if (version > 3)
  window.onload = init;
 // -->
</script>
Poi ti servono anche le immagini-stelline. Sono 6 immagini e le puoi
recuperare sempre sul sito philips: 
http://www.philips.com/trailgifX.gif
dove la X e' un numero che va da 1 a 6. Chiaramente puoi mettere delle
immagini personalizzate, basta che le chiami con lo stesso nome, o vai a
cambiare il nome nello script.
Nota estetica: se utilizzi uno sfondo scuro e' piu' bello :-)
Spero di essere stato d'aiuto.
--
ciao
gelty
--
Visita 
http://www.sifor.it
Elimina *toglimi* per le risposte

 --
Trovi spiegazioni esaurienti (in inglese) su:
www.siteexpert.com
rivolgendoti alle pagine delle
INSIDE TECHNIQUES
ed in particolare alle lezioni sui
CURSOR TRAILS
Ciao
    Luca