Question

我试图让这个图片库在我的页面上运行。如果我创建一个测试页并将所有这些代码放在一个文件中，那么它可以正常工作。如果我将CSS和Javascript分离到他们自己的文件中（是的，我在HTML页面中包含了这两个文件），鼠标过/关事件就不起作用了。我显然遗漏了一些简单的东西，但我似乎无法弄明白。如果有人可以帮我修改javascript以便它可以正常工作，我会非常感激！：）

以下是代码：

<html>
<head>
    <style type="text/css">
        .imgStyle
        {
            width:100px;
            height:100px;
            border:3px solid grey;
        }
    </style>
</head>
<body>
    <img id="mainImage" style="border:3px solid grey" 
         src="/Images/Hydrangeas.jpg" height="500px" width="540x"/>
    <br />
    <div id="divId" onclick="changeImageOnClick(event)">
        <img class="imgStyle" src="/Images/Hydrangeas.jpg" />
        <img class="imgStyle" src="/Images/Jellyfish.jpg" />
        <img class="imgStyle" src="/Images/Koala.jpg" />
        <img class="imgStyle" src="/Images/Penguins.jpg" />
        <img class="imgStyle" src="/Images/Tulips.jpg" />
    </div>
    <script type="text/javascript">

        var images = document.getElementById("divId")
                             .getElementsByTagName("img");

        for (var i = 0; i < images.length; i++)
        {
            images[i].onmouseover = function ()
            {
                this.style.cursor = 'hand';
                this.style.borderColor = 'red';
            }
            images[i].onmouseout = function ()
            {
                this.style.cursor = 'pointer';
                this.style.borderColor = 'grey';
            }
        }

        function changeImageOnClick(event)
        {
            event = event || window.event;
            var targetElement = event.target || event.srcElement;

            if (targetElement.tagName == "IMG")
            {
                mainImage.src = targetElement.getAttribute("src");
            }
        }
    </script>
</body>
</html>

图片库问题。鼠标悬停/退出事件无效

0 个答案: