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

不幸的是，您误解了 Codex 中的某些内容。脚本标签并不打算用于内联脚本调用。由于脚本标签是标准的 html 标签，因此您不能将它们填充到另一个 html-tag 的属性中。它还说：

...您可以在 header.php 模板文件的头部，在元标记和样式表链接之间设置 JavaScript 调用或脚本本身...。

所以你的 mouseover.js 文件应该链接在<head>结束标记之前或之前</body>。您链接的 Codex 条目不包括运行内联 JavaScript。

要修复您的代码，您必须将第一个脚本标记<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 回答