[javascript] 사진 확대해서 띄우기 / onClick 이벤트 활용하여, 사진 클릭 시 사진 확대하기

 

아래 작은 사진을 클릭하면, 위의 사진처럼 확대가 되어 나오게 해보기~

 

<div>
    <img src="./images/img1.PNG" id="big_pic"><br/>
    <img src="./images/img2.PNG" id="sm_pic" onClick="changemethod(2)">
    <img src="./images/img3.PNG" id="sm_pic" onClick="changemethod(3)">
    <img src="./images/img4.PNG" id="sm_pic" onClick="changemethod(4)">
    <img src="./images/img1.PNG" id="sm_pic" onClick="changemethod(1)">
</div>

 

먼저, img 파일들의 경로를 작성해주고

 

<style>
    div{

        text-align:center;

    }

    #big_pic{
        width:400px;
        height:400px;


    }

    #sm_pic{

        width:150px;
        height:150px;


    }
</head>

 css 에서 크기 조절을 예쁘게 해주자구~!

 

<div class="mainmain">
<img src="./images/img1.PNG" class="pic1" id="myimg"><br/>

<img src="./images/img1.PNG" class="bottom1" onMouseOver="myover(1)">
<img src="./images/img2.PNG" class="bottom1" onMouseOver="myover(2)">
<img src="./images/img3.PNG" class="bottom1" onMouseOver="myover(3)">
<img src="./images/img4.PNG" class="bottom1" onMouseOver="myover(4)">
</div>

이건 body내용

 

 

 

그리고,  중요한 script 연결

<script>
function myover(a){
	myimg.src="./images/img"+a+".PNG";

}
</script>

 

a는 매개변수를 나타내고, 위애 body 내에서 onMouseOver="myover(1)" 이런 식으로 값(파라메터)가 들어가면

script내의 myover 메소드에서 a에 1이 들어가는 것~!

 

myimg (큰 사진 id) 의 src 주소가 바뀌니,  마우스를 작은 사진에 갖다댔을때

큰 화면처럼 확대되는 효과를 연출할 수 있다😍

 

역시 프론트앤드는 재밋엉