Вопрос по onmouseover, javascript, image – наведите указатель мыши на изображение

0

У меня есть 4 изображения на странице HTML: 1.png, 2.png, 3.png и 4.png. Когда пользователь перемещает указатель мыши на 1.png, 2.png должен заменить 4.png. Аналогично, если указатель мыши переходит на 2.png, 3.png следует заменить на 1.png.

Вот'мой код:



    
        
        
            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()
            {

            }
        
        
            table
            {
                margin-left:auto;
                margin-right:auto;
            }
        
    
    
        
            
                <img src="exercice1/1.png" alt="Image 1" id="img1" onmouseover="image1_mouseover()">
                <img src="exercice1/2.png" alt="Image 2" id="img2" onmouseover="image2_mouseover()">
            
            
                <img src="exercice1/3.png" alt="Image 3" id="img3">
                <img src="exercice1/4.png" alt="Image 4" id="img4">
            
        
    

Сначала он работает, когда я перемещаю мышь на 1.png, а 2.png заменяет 4.png. Но затем, когда я перемещаю мышь в 2.png, 1.png неt заменить 3.png, вместо этого мне пришлось навести курсор мыши на 4.png, чтобы это произошло.

Какие'S не так?

Ваш Ответ

1   ответ
1

Я думаю ты'запутался в том, что происходит с изображениями.

Вместо того, чтобы переключать их атрибуты, как насчет переключения изображений позиции?

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);
}

Затем используйте этот HTML:


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

Похожие вопросы