1

大约 19 年前，我需要一个使用onmouseover事件更改图像的脚本。使用的脚本name="foo"当然不再受<img>标签支持。我已经完全忘记了脚本是如何工作的，我需要一些帮助来调整它以使用id="foo".

这是我的脚本<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>

...这是我的 HTML <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>

如果我更改<img name="poetry"为<img id="poetry"，整个事情就会停止工作。

4

1 回答 1

3

您的

document[changeImages.arguments[i]]

当第一个参数是 时poetry，访问document.poetry. 改为使用getElementById，以选择具有特定 id 的元素：

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

您还可以考虑使用addEventListener, 而不是内联处理程序正确附加侦听器：

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

如果您对页面上的多个图像执行此类操作，则可以通过动态选择<a>'s来使代码变得更好nextElementSibling，从而完全避免使用 ID：

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);
});
于 2019-07-10T00:03:52.630 回答