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 に答える