gpt4 book ai didi

javascript - 不确定如何将古老的图像切换器代码从使用名称 ="foo"调整为 ID ="foo"

转载 作者:行者123 更新时间:2023-11-30 11:02:45 26 4
gpt4 key购买 nike

大约 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>

...这是存在于我的 <body> 中的 HTML :

<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" , 整个事情停止工作。

最佳答案

你的

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> 使代码变得更好。的 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);
});

关于javascript - 不确定如何将古老的图像切换器代码从使用名称 ="foo"调整为 ID ="foo",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56961811/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com