Move The Mouse Pointer Over An Image

I have 4 images in an HTML page: 1.png, 2.png, 3.png and 4.png. When the user moves the mouse pointer over to 1.png, 2.png should replace 4.png. Similarly, if the mouse pointer goe

Solution 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:

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