Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap

Q1745 How can an image slide across the top of images when the mouse pointer moves across the same images?

You are here: irt.org | FAQ | JavaScript | DHTML | Q1745 [ previous next ]

Try the following:



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

  if (x>455) x=455;
  if (x<10) x=10;

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

var over = false;

function mouseOver() { over = true; }
function mouseOut() { over = false; }



<span id="sliderX" style="position: absolute">
<img src="slide.gif" width="50" height="10">


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



©2018 Martin Webb