将鼠标指针移到图像上

Question

I have 4 images in an HTML page: 1.png, 2.png, 3.png and 4.png. 我在HTML页面中有4张图像：1.png，2.png，3.png和4.png。 When the user moves the mouse pointer over to 1.png, 2.png should replace 4.png. 当用户将鼠标指针移到1.png时，2.png应该替换4.png。 Similarly, if the mouse pointer goes to 2.png, 3.png should be replaced with 1.png. 同样，如果鼠标指针移至2.png，则应将3.png替换为1.png。

Here's my code: 这是我的代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            function image1_mouseover()
            {
                var img2 = document.getElementById('img2');
                var img4 = document.getElementById('img4');
                img2.setAttribute('src','exercice1/4.png');
                img2.setAttribute('id','img4');
                img4.setAttribute('src','exercice1/2.png');
                img4.setAttribute('id','img2');
            }

            function image2_mouseover()
            {
                var img1 = document.getElementById('img1');
                var img3 = document.getElementById('img3');
                img1.setAttribute('src','exercice1/3.png');
                img1.setAttribute('id','img3');
                img3.setAttribute('src','exercice1/1.png');
                img3.setAttribute('id','img1');
            }

            function image3_click()
            {

            }
        </script>
        <style type="text/css">
            table
            {
                margin-left:auto;
                margin-right:auto;
            }
        </style>
    </head>
    <body>
        <table class="centrer">
            <tr>
                <td><img src="exercice1/1.png" alt="Image 1" id="img1" onmouseover="image1_mouseover()"></td>
                <td><img src="exercice1/2.png" alt="Image 2" id="img2" onmouseover="image2_mouseover()"></td>
            </tr>
            <tr>
                <td><img src="exercice1/3.png" alt="Image 3" id="img3"></td>
                <td><img src="exercice1/4.png" alt="Image 4" id="img4"></td>
            </tr>
        </table>
    </body>
</html>

It works at first when I move the mouse to 1.png and 2.png replaces 4.png. 首先，当我将鼠标移至1.png并由2.png替换4.png时，它可以工作。 But then when I move the mouse to 2.png, 1.png doesn't replace 3.png, instead I had to move the mouse over 4.png for that to happen. 但是，当我将鼠标移至2.png时，1.png并不能代替3.png，而是不得不将鼠标移至4.png上方才能实现。

What's wrong? 怎么了？

Answer 1

I think you're confused over what is happening to the images. 我认为您对图像发生的事情感到困惑。

Instead of switching their attributes, how about switching the images' positions? 与其切换属性，不如切换图像的位置？

function switch_images(i1,i2) {
    var e1 = document.getElementById('img'+i1),
        e2 = document.getElementById('img'+i2),
        e1parent = e1.parentNode;
    e2.parentNode.appendChild(e1);
    e1parent.appendChild(e2);
}

Then use this HTML: 然后使用以下HTML：

<table class="centrer">
    <tr>
        <td><img src="exercice1/1.png" alt="Image 1" id="img1" onmouseover="switch_images(2,4)"></td>
        <td><img src="exercice1/2.png" alt="Image 2" id="img2" onmouseover="switch_images(1,3)"></td>
    </tr>
    <tr>
        <td><img src="exercice1/3.png" alt="Image 3" id="img3"></td>
        <td><img src="exercice1/4.png" alt="Image 4" id="img4"></td>
    </tr>
</table>

将鼠标指针移到图像上

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-02-20 20:31:13

将鼠标指针移到图像上

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-02-20 20:31:13

解决方案1
1 已采纳 2013-02-20 20:31:13