Question

这就是我在HTML页面中调用java脚本函数的方法： -

<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文件中放了一个警告。它被调用但它没有显示任何翻转效果。为什么呢？

Answer 1

您需要运行此onload - 执行该函数时，您的图像标记尚不可用于脚本 - 您实际上并未遵循本应放在页面末尾或我的脚本中的脚本指令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>

图像翻转脚本无法正常工作

1 个答案: