0

画像を交換するために、html onmouseover 属性内で JavaScript 関数を実行しようとしています。写真はすべて表示されますが、onmouseover は機能しません。私は間違った方法でエスケープしたと思います (ブラウザの表示 > )-しかし、何が悪いのかわかりません。助けてくれてありがとう!

コードの一部:

...
<?php       
            echo "<img src=\"$main_img_small\" alt=\"\" onmouseover=\"<script language=\"JavaScript\" type=\"text/javascript\" src=\"mouseover.js\"></script><script type=\"text/javascript\">swapImage(0);</script>\">";
                    echo "<img src=\"$var1_small\" alt=\"\" onmouseover=\"<script language=\"JavaScript\" type=\"text/javascript\" src=\"mouseover.js\"></script><script type=\"text/javascript\">swapImage(1);</script>\">";
                    echo "<img src=\"$var2_small\" alt=\"\" onmouseover=\"<script language=\"JavaScript\" type=\"text/javascript\" src=\"mouseover.js\"></script><script type=\"text/javascript\">swapImage(2);</script>\">";
    ?>
...

mouseover.js (同じフォルダに保存):

        var phpvar1_large = <?php echo json_encode($var1_large); ?>;
        var phpvar2_large = <?php echo json_encode($var2_large); ?>;
        var phpvar3_large = <?php echo json_encode($var3_large); ?>;
        var phpvar4_large = <?php echo json_encode($var4_large); ?>;

        if(!phpvar1_large){
        var imgArray = new Array(
            '<?=$main_img; ?>'
            );
        }else if(!phpvar2_large){
            var imgArray = new Array(
            '<?=$main_img; ?>',
            '<?=$var1_large; ?>'
            );
        }else if(!phpvar3_large){
        var imgArray = new Array(
            '<?=$main_img; ?>',
            '<?=$var1_large; ?>',
            '<?=$var2_large; ?>',
            '<?=$var3_large; ?>'
            );
        }else if(!phpvar4_large){
            var imgArray = new Array(
            '<?=$main_img; ?>',
            '<?=$var1_large; ?>',
            '<?=$var2_large; ?>',
            '<?=$var3_large; ?>'
            );
        }else if(phpvar4_large){
        var imgArray = new Array(
            '<?=$main_img; ?>',
            '<?=$var1_large; ?>',
            '<?=$var2_large; ?>',
            '<?=$var3_large; ?>',
            '<?=$var4_large; ?>'
        );
        }


        function swapImage(imgID) {
            var theImage = document.getElementById('theImage');
            var newImg;
            newImg = imgArray[imgID];
            theImage.src = newImg;
        }

        function preloadImages() {      
            for(var i = 0; i < imgArray.length; i++) {
                var tmpImg = new Image;
                tmpImg.src = imgArray[i];
            }
        }

ブラウザ出力:

...
<div id="image">
            <img id="theImage" src="http://ecx.images-amazon.com/images/I/41ioC67AdgL.jpg" alt="" />
        </div>

        <div id="thumbs">
            <img src="http://ecx.images-amazon.com/images/I/41ioC67AdgL._SL75_.jpg" alt="" onmouseover="<script language="JavaScript" type="text/javascript" src="mouseover.js"></script><script type="text/javascript">swapImage(0);</script>"><img src="http://ecx.images-amazon.com/images/I/41Yrx4v10TL._SL75_.jpg" alt="" onmouseover="<script language="JavaScript" type="text/javascript" src="mouseover.js"></script><script type="text/javascript">swapImage(1);</script>"><img src="http://ecx.images-amazon.com/images/I/41bzT-hN9mL._SL75_.jpg" alt="" onmouseover="<script language="JavaScript" type="text/javascript" src="mouseover.js"></script><script type="text/javascript">swapImage(2);</script>">

            <br />
        </div>

...

それで、あなたが見る小さな写真の右側に>>

注: ご参考までに、私は最終的にこれを wordpress ページで実行しようとしています。そのため、javascript コマンドはそのように見えます (ここで見られます: http://codex.wordpress.org/Using_Javascript ) 。

4

1 に答える 1

0

残念ながら、あなたはコーデックスから何かを誤解しています。スクリプト タグは、インライン スクリプト呼び出しで使用するためのものではありません。スクリプト タグは標準の html タグであるため、別の html タグのプロパティにそれらを詰め込むことはできません。また、次のようにも述べています。

...JavaScript の呼び出しまたはスクリプト自体を、header.php テンプレート ファイルのヘッダーのメタ タグとスタイル シート リンクの間に設定できます....

したがって、mouseover.js ファイルは<head>終了タグの中または前にリンクする必要があります</body>。インライン JavaScript の実行は、リンクした Codex のエントリではカバーされていません。

コードを修正するには、最初のスクリプト タグを に配置し<head>、関数呼び出しをインライン JavaScript 呼び出し ( onmouseover="...") に配置する必要があります。コードは次のようになります。

<!-- This should be in your head-tag: -->
<script language="javascript" type="text/javascript" src="mouseover.js"></script>

...
<div id="thumbs">
    <img src="http://ecx.images-amazon.com/images/I/41ioC67AdgL._SL75_.jpg" alt="" onmouseover="javascript:swapImage(0);">
    <img src="http://ecx.images-amazon.com/images/I/41Yrx4v10TL._SL75_.jpg" alt="" onmouseover="javascript:swapImage(1);">
    <img src="http://ecx.images-amazon.com/images/I/41bzT-hN9mL._SL75_.jpg" alt="" onmouseover="javascript:swapImage(2);">
</div>

ただし、JavaScript のイベント リスナーについて学習するか、jQuery を試して特定の HTML 要素にマウスオーバー機能を追加することをお勧めします。インライン JavaScript (onmouseover=""など) が HTML を台無しにします。

于 2012-10-26T08:39:41.503 に答える