Not sure how to adapt ancient image switcher code from using name="foo" to id="foo"

Question

Not sure how to adapt ancient image switcher code from using name="foo" to id="foo"

60 Views Asked by mig81 At 09 July 2019 at 23:58

About 19 years ago, I needed a script that changes images using the onmouseover event. The script used name="foo" which, of course, can no longer be supported by the <img> tag. I've literally forgotten how the script works and I need some help adapting it to use id="foo".

This is the script that lives in my <head>:

<script>
function newImage(arg) {
  if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
  }
}

function changeImages() {
  if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
      document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
  }
}

var preloadFlag = false;

function preloadImages() {
  if (document.images) {
    archives_over = newImage("/images/index/menu/archives_over.jpg");
    bio_over = newImage("/images/index/menu/bio_over.jpg");
    poetry_over = newImage("/images/index/menu/poetry_over.jpg");
    preloadFlag = true;
  }
}
</script>

...and this is the HTML that lives in my <body>:

<a href='https://www.foo.com/index.php?page=news'
   onmouseover='changeImages("poetry", "/images/index/menu/poetry_over_static.jpg"); return true;'
   onmouseout='changeImages("poetry", "/images/index/menu/poetry_over_static.jpg"); return true;'
   onmousedown='changeImages("poetry", "/images/index/menu/poetry_over_static.jpg"); return true;'
   onmouseup='changeImages("poetry", "/images/index/menu/poetry_over_static.jpg"); return true;'>
  <img name="poetry" src="/images/index/menu/poetry_over_static.jpg">
</a>

If I change <img name="poetry" to <img id="poetry", the whole thing stops working.

Original Q&A

There are 1 best solutions below

**CertainPerformance** · Accepted Answer · 2019-07-10T00:03:52.630000

Your

document[changeImages.arguments[i]]

when the first argument is poetry, accesses document.poetry. Use getElementById instead, to select an element with a particular id:

function changeImages(id, newSrc) {
  document.getElementById(id).src = newSrc;
}

You also might consider attaching listeners properly using addEventListener, rather than inline handlers:

const a = <select your <a> tag here>
const img = document.getElementById('poetry');
const fn = () => {
  img.src = '/images/index/menu/poetry_over_static.jpg';
}
['mouseover', 'mouseout', 'mousedown', 'mouseup'].forEach((eventType) => {
  a.addEventListener(eventType, fn);
});

If you're doing this sort of thing for multiple images on the page, then you can make the code even better by dynamically selecting the <a>'s nextElementSibling, allowing you to avoid IDs entirely:

const fn = ({ target }) => {
  const img = target.nextElementSibling;
  img.src = '/images/index/menu/poetry_over_static.jpg';
}
['mouseover', 'mouseout', 'mousedown', 'mouseup'].forEach((eventType) => {
  a.addEventListener(eventType, fn);
});

Not sure how to adapt ancient image switcher code from using name="foo" to id="foo"

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in W3C-VALIDATION

Related Questions in NAME-ATTRIBUTE

Trending Questions

Popular # Hahtags

Popular Questions