gpt4 book ai didi

javascript - 图像翻转脚本未按预期工作

转载 作者:行者123 更新时间:2023-12-02 19:26:13 25 4
gpt4 key购买 nike

这就是我在 HTML 页面中调用 JavaScript 函数的方式:-

<script type="text/javascript" src="imagerollover.js"></script>

</script>
<script type="text/javascript">
//Following function should be called at the end of the page:
imagerollover();
</script>
</head>

<body>
.
.
.

这是我的 imagerollover.js:-

function imagerollover(){

var allimages=document.getElementsByTagName("img")
var preloadimages=[]
for (var i=0; i<allimages.length; i++){
if (allimages[i].getAttribute("data-over")){ //if image carries "data-over" attribute
preloadimages.push(new Image()) //preload "over" image
preloadimages[preloadimages.length-1].src=allimages[i].getAttribute("data-over")
allimages[i].onmouseover=function(){
this.src=this.getAttribute("data-over")
}
allimages[i].onmouseout=function(){
this.src=this.getAttribute("data-out")
}
} //end if
} //end for loop
}

//Usage: Call following function at the end of the page:
//imagerollover()

图像标签:

<img src="knitting1.jpg" 
data-over="knitting2.jpg"
data-out="knitting1.jpg"
alt="Logo" width="400px" height="90" align="middle" />

此外,图像 knitting1.jpg 和 knitting2.jpg 都存在于我网站的根文件夹中。我不知道出了什么问题。

我在一开始就在 imagerollover.js 文件中放置了一个警报。它被调用,但没有显示任何翻转效果。为什么?

最佳答案

您需要运行此加载 - 当您执行该函数时,您的图像标签尚不可用于脚本 - 您实际上并没有遵循应该放置在页面末尾或我的脚本中的指令。 onload 中的建议

<head>
<script type="text/javascript" src="imagerollover.js"></script>

</script>
<script type="text/javascript">
window.onload=function()
//Following function should be called at the end of the page OR on window.onload!
imagerollover();
}
</script>
</head>

关于javascript - 图像翻转脚本未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12024419/

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