Mouse trail...how do I do this?

http://www.comstock.com/web/search/...|PX&searchWithinResults=&searchMethod

Rollover an image, and you'll see a little box pops up that trails

 

<script>
document.onmousemove = update;
function update(e) {
 if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }  
  }
}
function hoveri(el) {
var img = el.src;
 

//posx and posy contains mouse position
//now you need to find a way to display the entire box on the screen
//use screen.width and screen.height to calculate
//use CSS z-index to make the box overlay on the images
var boxw = 200;
var boxy = 100;
var d = document.getElementById('box');
d.style.display = "block";
d.style.left = (mousex - 10) + "px";
d.style.top = (mousey - 10) + "px";
d.innerHTML = "<img src=" + img + ">";
}
</script>
<img src="http://images1.comstock.com/Imagewarehouse/BX/SITECS/ThumbnailVersions/64501-64750/bxp64697.jpg" onMouseOver="hoveri(this)">
<div id="box" style="position:absolute; display:none;width:300px;height:200px;border:3px solid blue; background-color:white;z-index:90; "></div>

Code (markup):

this should give you a start..it's far from perfect, but it might help you ...

 

10x a lot
This is a very nice feature for a website.
10x again

 

Hi!

Remember to use the type attribute on your script element.

- P