Jquery[제이쿼리] 이벤트[event]메서드 mouseover,mouseout이미지변경

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery]로 이벤트[event]메서드 mouseover,mouseout으로 

이미지변경을 해보겠습니다.

위화면처럼 셋팅해주세요~

jpg파일들은 'Js_2_img'라는 폴더를 만들어 따로 관리하였습니다.
자 이제 실행을 해보겠습니다.

실행 화면입니다. ㅎㅎ 여기까는 참쉽죠?

===============================
$('img').mouseover(function(){
===============================
'img' <== 대상으로 mouseover 마우스가 올라갈경우



===============================
$(this).attr('src','Js_2_img/2.jpg');
===============================
<img> 태그의 src 경로를 'Js_2_img/2.jpg'로 바꾼다라는 뜻입니다.
앞에서해서 간단하죠?

실행을 하면 아직 검정색입니다 하지만

마우스를 올리면 이미지가 바뀌는 모습입니다.
하지만 새로고침을 안하는 한 두번째 그림으로 고정일 꺼에요
그럼이제 마우스를 내리면 다시 첫번째 그림으로 바뀌도록 해보겠습니다.

===============================
.mouseout(function(){
===============================
위에 문구가 잘 이해안되시는분들을 위해 설명해드리면
$('img').mouseout(function(){ <== 이부분이랑 똑같습니다 그냥 이어서 적어서 그래요 ㅎ
$('img').mouseover(function(){}).mouseout(function(){}); 이런형식입니다.
'img' <== 대상으로 mouseover 마우스가 내려갔을경우



===============================
$(this).attr('src','Js_2_img/1.jpg');
 ===============================
<img> 태그의 src 경로를 'Js_2_img/1.jpg'로 바꾼다라는 뜻입니다.
이제 실행해볼까요?

이미지에 마우스가 올라가기 전!

이미지에 마우스가 올라간 후!

이미지에 마우스가 내려간 후! 입니다.
오늘은 제이쿼리[jquery] 이벤트[event]메서드 mouseover,mouseout을 사용하여
이미지[img]를 변경해보았습니다.
그럼 다음에 또만나요~