0

这就是我在 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 文件中放置了一个警报。它被调用，但没有显示任何翻转效果。为什么？

4

1 回答 1

2

您需要运行此 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>
于 2012-08-19T05:28:28.917 回答