반응형
이렇게 5개의 기본 똑같은 이미지가 있으면
mouseover 한 이미지만 따로 배열에 저장해 놓은 5개의 이미지중 하나로 랜덤으로 바뀌게 하는
로직을 만들었다.
근데 문제는 마우스를 올린 이미지 하나만 랜덤값 으로 바뀌어야 하는데
하나의 이미지에 마우스를 올리면 5개 이미지 전체가 바뀌어버린다. ㅠㅠ
뭐가 문제인지 찾아보니까
여기 형광펜 칠해논 this 자리에 "img" 를 넣어놔서 였다...-_-
this는 그 값 하나만 가져오는데
"img"로 넣어노니까 html태그 안에있는 img 태그 전체가 바뀌는 거였다....
"img" 대신 this를 넣어주니까 잘작동한다!!!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><!--제이쿼리 링크-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><!--부트스트랩 링크-->
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@700&family=Gugi&family=Kirang+Haerang&display=swap" rel="stylesheet"> <!--구글폰트 링크-->
</head>
<body>
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<script>
//모든 이미지에 같은 이미지를 넣고 width, geight, border 설정
$("img").attr("src","../image/redhair11.PNG").css({
"width":"200px",
"height":"200px",
"border":"5px dotted yellow"
});
//5개의 또 다른 이미지명을 배열에 넣는다
//0~4번까지
/* let imaarr = new Array();
imaarr[0] ="../image/redhair1.PNG";
imaarr[1] ="../image/redhair2.PNG";
imaarr[2] ="../image/redhair3.PNG";
imaarr[3] ="../image/redhair4.PNG";
imaarr[4] ="../image/redhair5.PNG"; */
let imgarr =[
"../image/redhair1.PNG",
"../image/redhair2.PNG",
"../image/redhair3.PNG",
"../image/redhair4.PNG",
"../image/redhair5.PNG"]
//img태그에 마우스를 올리면 5개 이미지중 한개를 랜덤으로 구한후 src를 변경한다
$("img").mouseover(function () {
imgsrc = $(this).attr("src");
let ran = parseInt(Math.random()*5);
$(this).attr("src",imgarr[ran]);
})
//마우스 때면 원래대로
$("img").mouseout(function () {
$("img").attr("src",imgsrc);
})
</script>
</body>
</html>참고 코드도 같이 올리겠다
처음에 배열 넣어준방식이 문제인가 싶어서 자꾸 바꿨었다ㅋㅋㅋ ㅠㅠ
주석처리된 배열이 고민의 흔적..
반응형