让一个元素影响多个图像

我正在尝试制作一个平铺图像页面，每个图像都有三个状态翻转效果。我让它对第一张图像起作用，但不能让它影响其他图像。我知道这与我使用getElementById有关，但还没能找到解决方案

当前代码:

  <!DOCTYPE html>
    <html>
    <head><link rel="stylesheet" type="text/css"
    href="test4.css"/>
    <script>
    var clicked = false;
    function onClick()
    {
    clicked = true;
    document.getElementById("myImage").src="images/in.jpg";
    }
    function onMouseover() {
    if(!clicked)
    document.getElementById("myImage").src="images/half.jpg";
    }
    function onMouseout(obj) {
    if(!clicked)
    obj.src="images/out.jpg";
    }
    </script>
    </head>
    <body> 
    <img onmouseover="onMouseover()" onmouseout="onMouseout(this)" onclick="onClick()"                                    
    id="myImage" src="images/out.jpg" width="167" height="230">
    </body>
    </html>

请,,由于

您的解释暗示您的页面上有许多<img/>，但您的代码只显示一个。我将假设你的解释是正确的，并且为了这个答案的目的，有许多<img/>。

给定id的页面上只能有一个元素。任何超过1的页面都是无效的，您将看到类似您所看到的问题。不是通过id检索，而是为所有元素提供相同的类，并使用document.getElementsByClassName

检索

相关内容

最新更新

热门标签：