将鼠标指针移到图像上 [英] move the mouse pointer over an image
问题描述
我在HTML页面中有4张图像:1.png，2.png，3.png和4.png.当用户将鼠标指针移至1.png时，2.png应该替换4.png.同样，如果鼠标指针移至2.png，则应将3.png替换为1.png.
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 goes to 2.png, 3.png should be replaced with 1.png.
这是我的代码:
<!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>
当我将鼠标移至1.png并由2.png替换4.png时，它首先起作用.但是，当我将鼠标移至2.png时，1.png并不能替代3.png，而是不得不将鼠标移至4.png之上.
It works at first when I move the mouse to 1.png and 2.png replaces 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.
怎么了?
推荐答案
我认为您对图像所发生的事情感到困惑.
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);
}
然后使用以下HTML:
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>
这篇关于将鼠标指针移到图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
