호버에서 img src를 변경하고 클릭시 다른 src로 변경하려고합니다.

Question

img가 포함 된 div가 있습니다. 마우스를 올려 놓으면 img src가 변경 될 수 있기를 원합니다. , 클릭 할 때 다른 src에 동일한 img 변경을가집니다 (두 번째 클릭시 다시 되돌림). 지금까지 나는 호버에 변경 만들 수있는 J-쿼리 코드가 있습니다

HTML

<div class="tab_box"> 
    <img id="img1" src="tab.png"> 
</div> 

J-QUERY

$(document).ready(function(){$('#img1').hover(function(){$(this).attr('src','tabt2.png')},function() 
{$(this).attr('src','tab.png')}) }); 

을하지만 난 다음에 변경하는 방법을 확실하지 오전 클릭하면 다른 src가 모두 표시됩니다 (이미지를 클릭하면 가리켜 져야합니다.) 누구든지 추천 할 수 있습니까? 다양한 크기 조정 이유 때문에 가능한 경우 div의 배경 이미지로 사용하는 대신 div 내에서 이미지를 독립 실행 형 이미지로 유지하려고합니다.

Answer 1

.hover() 및 Jquery의 .click() 함수. '클릭'(

$('#img1').hover(function() { 
    $(this).attr('src', 'http://www.fateheducation.com/fatehnew/Testimonial_Image/avatar-small.png'); 
}); 
$('#img1').click(function() { 
    $(this).attr('src', 'http://moduleoff.com/sites/all/themes/moduleoff/images/xdruplicon_rotated_small.png.pagespeed.ic.Xl8nCuL4lR.png') 
}); 

Working Fiddle