728x90
반응형
<!-- src/main/webapp/20220401/mouseex2.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 커서로 이미지 변경하기</title>
<script type="text/javascript">
imgOver = new Array(4); //4개의 이미지를 가진 배열 선언. 마우스커서가 들어온 경우 이미지.
imgOut = new Array(4); //4개의 이미지를 가진 배열 선언. 마우스커서가 빠진 경우 이미지
for (let i=0; i<imgOver.length; i++) { // i : 0 ~ 3
imgOver[i] = new Image(); //이미지객체 생성.
imgOut[i] = new Image(); //이미지객체 생성.
imgOver[i].src = "../img/" + i + "_over.jpg"
imgOut[i].src = "../img/" + i + "_out.jpg"
}
function mover(n) {
//document.images : 현재 페이지의 모든 이미지 객체들의 배열 객체.
console.log(document.images.length)
document.images[n].src = imgOver[n].src;
}
function mout(n) {
console.log(document.images.length)
document.images[n].src = imgOut[n].src;
}
</script>
<style type="text/css">
td { height :60px; text-align:center;}
</style>
</head>
<body>
<table>
<tr><td height="60" align="center">
<a href="#" onmouseover="mover(0)" onmouseout="mout(0)">
<img name="m0" src="../img/0_out.jpg"> </a></td></tr>
<tr><td height="60" align="center">
<a href="#" onmouseover="mover(1)" onmouseout="mout(1)">
<img name="m1" src="../img/1_out.jpg"> </a></td></tr>
<tr><td height="60" align="center">
<a href="#" onmouseover="mover(2)" onmouseout="mout(2)">
<img name="m2" src="../img/2_out.jpg"> </a></td></tr>
<tr><td height="60" align="center">
<a href="#" onmouseover="mover(3)" onmouseout="mout(3)">
<img name="m3" src="../img/3_out.jpg"> </a></td></tr>
</table>
</body>
</html>0_out.jpg
0.01MB
0_over.jpg
0.01MB
1_out.jpg
0.01MB
1_over.jpg
0.01MB
2_out.jpg
0.01MB
2_over.jpg
0.01MB
3_out.jpg
0.01MB
3_over.jpg
0.01MB
728x90
반응형