Question

我正在尝试在html onmouseover属性中运行javascript函数来交换图片。图片全部显示，但onmouseover不起作用;我想我逃脱了错误的方式（浏览器显示＆gt;） - 但是我找不到什么是错的非常感谢您的帮助！

部分代码：

...
<?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>

...

因此，在小图片的右侧，您会看到“＆gt;

注意：如果你想知道，我最终试图在wordpress页面上运行它，这就是为什么javascript命令看起来像它的样子（见http://codex.wordpress.org/Using_Javascript）

Answer 1

不幸的是，你误解了法典中的一些东西。脚本标记不适用于内联脚本调用。由于脚本标记是标准的html标记，因此您无法将它们填充到另一个html标记的属性中。它还说：

...您可以在header.php模板文件的头部，meta标签和样式表链接之间设置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。

html属性中的JS函数 - 全部通过php回显。逃脱错误？

1 个答案: