[CSS/JavaScript] 작은 이미지 위에 마우스 올리면 큰 이미지 변경하게 만들기

이것만 4시간을 만졌다.. 자바스크립트를 넣어줘도 아무런 반응이 없고,

hover로 css를 연동시켜서 만져도 아무런 반응이 없었다.

 

html에 onmouseover를 사용해 자바스크립트의 함수를 이용해도 안됐었는데, this를 넣어주니 바로 적용이 되었다.

<div class="small-image">
    <img id="game1" src="image/gamefull.png" onmouseover="imgChange(this)">
</div>
<div class="small-image">
    <img id="game2" src="image/gamefull2.png" onmouseover="imgChange(this)">
</div>
<div class="small-image">
    <img id="game3" src="image/gamefull3.png" onmouseover="imgChange(this)">
</div>
<div class="small-image">
    <img id="game4" src="image/gamefull4.png" onmouseover="imgChange(this)">
</div>
<div class="small-image">
    <img id="game5" src="image/gamefull5.png" onmouseover="imgChange(this)">
</div>

 

내가 mouse 커서를 올리면 함수를 실행시킬 항목에 전부 같은 이름의 메서드를 넣어준다.

 

<script type="text/javascript">

function imgChange(img) {
	document.getElementById('a1').src = img.src;
}

</script>

 

 

그러고 매개변수로 받아주면 실행이 아주 잘된다.. 나는 보드게임을 좋아해서 보드게임을 예시로 만들어보았다.

테포마.. 언제 해볼 수 있을까?? 이런 난이도의 게임을 언젠가 시도할 수 있을거란 믿음을 가져본다ㅎㅎ..