jQuery_hover 이미지(img) change하기

싱어게인 가수들의 편곡 무대를 보며 짠함과 감동을 느낀다.

남들 몇 분이면 검색해서 찾을 코드를 난 6시간 검색했는데 찾지 못하고

결국 잘 아는 지인에게 물어물어 코드를 알게 되었다.

 

몇 시간동안 찾다가 못찾은 에러 문구는 

 $(document).ready(function(){     })

이걸 감싸주지 않아서...

무지함으로 이거 하나 때문에 몇 시간을 검색했는데 흑흑

그래도 확실히 알게 되었고, 성공했으니까.

성공에서 오는 기쁨이 코딩의 재미겠지..

검색도 능력이라는 것.

적성에 안 맞는건 항상 뼈져리게 느끼지만 그래도 개발자 되겠다고 도전했으니 개발자는 되보고 포기하고 싶다.

주저리주저리 그만하고 코드 기록 ㄱㄱ

코드 성공하고 싱어게인 분들의 이미지를 넣는데 얼마나 기쁘던지 >.<

싱어게인 가수분들의 열정을 다한 무대에 항상 자극을 받으며 나도 힘내야지 하며 만들었당 ㅋㅋ

 

----------------------------------------------------------------------------------------------------------------------

html  작성

<div class="allimg"> <!--모든 사진 가운데 정렬을 위해 묶음-->
	<h3> 사진 두 장 hover img change  </h3>
	<img src="resources/img/singagin/이승윤.JPG" id="img" /> <!--승윤님-무진님 전환 -->
	
    
	<hr><!--선극시-->
	
    
	<h3> 사진 여러장 hover img change  </h3>
    <!-- 메인 이미지 --> 
    <img class="main-img" src="resources/img/singagin/요아리.JPG"> 
    <!-- 작은 이미지 -->
    <div class="thumb-img"> 
         <a href="#"><img class="anotherImg" src="resources/img/singagin/요아리.JPG" ></a>
         <a href="#"><img class="anotherImg" src="resources/img/singagin/이소정.JPG" ></a>
         <a href="#"><img  class="anotherImg" src="resources/img/singagin/이정권.JPG"></a>
         <a href="#"><img class="anotherImg" src="resources/img/singagin/정홍일.JPG"></a>
    </div>

</div>

css 작성

<style type="text/css">

.allimg{
text-align:center; /*모든 사진 가운데 정렬*/
margin: auto;
}

#img{  /*승윤님-무진님 전환 사진*/
width:15%; hight:15%;
}

.main-img{   /*메인 이미지*/
width:15%; hight:15%;
}

.thumb-img img{   /*작은 이미지*/
width:6%; 
hight:6%;
}

</style>

jquery 작성

<script type="text/javascript">

 $(document).ready(function(){ 
 /*  $(document).ready(function(){ });  << 꼭 적어주자!!! 안적으면 실행 안됌 -
 html 문서가 준비되면 매개변수로 넣은 콜백함수 실행하라는 의미 */
	
	/*  이승윤-이무진 이미지 전환 */
	 $(function(){
		$("#img").hover(function()
		{
			$("#img").attr("src","resources/img/singagin/이무진.JPG");
		},
		function()
		{
			$("#img").attr("src","resources/img/singagin/이승윤.JPG");
		})
	})
	
	
	/* 작은 이미지에 마우스 올리면 메인으로 바뀜 */
	$(".anotherImg").hover(function() {
	var name = $(this).attr("src");  //attr(attrivuteName,value)
	$(".main-img").attr("src", name);
	});
	
	
	});
</script>