Q1744 How can cross-hairs follow the mouse pointer over an image or set of images?

You are here: irt.org | FAQ | JavaScript | DHTML | Q1744 [ previous next ]
Try:
<html>

<head>

<script language="JavaScript"><!--
function DOMEventGetClientX(e) {
  if (document.all)                  return e.offsetX;
  else if (document.getElementById)  return e.clientX + window.pageXOffset;
  else if (document.layers)          return e.pageX;
}

function DOMEventGetClientY(e) {
  if (document.all)                  return e.offsetY;
  else if (document.getElementById)  return e.clientY + window.pageYOffset;
  else if (document.layers)          return e.pageY;
}

function DOMElementSetTop(o,val) {
  if (document.getElementById) o.style.top = val;
  else if (document.all)       o.style.top = val;
  else if (document.layers)    o.top = val;
}

function DOMElementSetLeft(o,val) {
  if (document.getElementById) o.style.left = val;
  else if (document.all)       o.style.left = val;
  else if (document.layers)    o.left = val;
}

if (document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = trackMouse;

function trackMouse(e) {
  x = DOMEventGetClientX(e);
  y = DOMEventGetClientY(e);

  if (over) {
    if (document.getElementById) {
      DOMElementSetLeft(document.getElementById('sliderX'), y);
      DOMElementSetTop(document.getElementById('sliderY'), y);
    }
    else if (document.all) {
      DOMElementSetLeft(document.all['sliderX'], x);
      DOMElementSetTop(document.all['sliderY'], y);
    }
    else if (document.layers && document.layers['sliderX']) {
      DOMElementSetLeft(document.layers['sliderX'], x);
      DOMElementSetTop(document.layers['sliderY'], y);
    }
  }
}

var over = false;

function mouseOver() { over = true; }
function mouseOut() { over = false; }
//--></script>

</head>

<body>

<span id="sliderX" style="position: absolute">
<img src="slide.gif" width="1" height="510">
</span>

<br>

<span id="sliderY" style="position: absolute">
<img src="slide.gif" width="510" height="1">
</span>

<a href="javascript:' '" onMouseOver="mouseOver()" onMouseOut="mouseOut()"
><img src="a.gif" width="100" height="100" border="0"
><img src="b.gif" width="100" height="100" border="0"
><img src="c.gif" width="100" height="100" border="0"
><img src="d.gif" width="100" height="100" border="0"
><img src="e.gif" width="100" height="100" border="0"
></a><br><a href="javascript:' '" onMouseOver="mouseOver()" onMouseOut="mouseOut()"
><img src="a.gif" width="100" height="100" border="0"
><img src="b.gif" width="100" height="100" border="0"
><img src="c.gif" width="100" height="100" border="0"
><img src="d.gif" width="100" height="100" border="0"
><img src="e.gif" width="100" height="100" border="0"
></a><br><a href="javascript:' '" onMouseOver="mouseOver()" onMouseOut="mouseOut()"
><img src="a.gif" width="100" height="100" border="0"
><img src="b.gif" width="100" height="100" border="0"
><img src="c.gif" width="100" height="100" border="0"
><img src="d.gif" width="100" height="100" border="0"
><img src="e.gif" width="100" height="100" border="0"
></a><br><a href="javascript:' '" onMouseOver="mouseOver()" onMouseOut="mouseOut()"
><img src="a.gif" width="100" height="100" border="0"
><img src="b.gif" width="100" height="100" border="0"
><img src="c.gif" width="100" height="100" border="0"
><img src="d.gif" width="100" height="100" border="0"
><img src="e.gif" width="100" height="100" border="0"
></a><br><a href="javascript:' '" onMouseOver="mouseOver()" onMouseOut="mouseOut()"
><img src="a.gif" width="100" height="100" border="0"
><img src="b.gif" width="100" height="100" border="0"
><img src="c.gif" width="100" height="100" border="0"
><img src="d.gif" width="100" height="100" border="0"
><img src="e.gif" width="100" height="100" border="0"
></a>

</body>

</html>