Bewegen Sie den Mauszeiger über ein Bild
Ich habe 4 Bilder in einer HTML-Seite: 1.png, 2.png, 3.png und 4.png. Wenn der Benutzer den Mauszeiger auf 1.png bewegt, sollte 2.png 4.png ersetzen. Wenn der Mauszeiger auf 2.png zeigt, sollte 3.png durch 1.png ersetzt werden.
Hier ist mein 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>
Es funktioniert zuerst, wenn ich die Maus auf 1.png bewege und 2.png 4.png ersetzt. Aber wenn ich dann die Maus auf 2.png bewege, ersetzt 1.png nicht 3.png, stattdessen musste ich die Maus über 4.png bewegen, damit das passierte.
Was ist falsch?