[jQuery] 마우스 오버하여 이미지 변경하기 > 기술자료

• 목록

메뉴에 마우스가 오버될때 다른이미지를 보여주는 방법입니다.


1. li 를 이용한 방법
<!-- // jQuery 파일을 중복호출하면 오류가 발생합니다.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
-->
<script>
// 마우스 오버할때 다른 이미지 보이기
$(function() { 
    $("#HP_MouseOverEffect_li li a img").hover(function(){ 
        $(this).attr("src", $(this).attr("src").replace(".png", "_on.png")); 
    }, function(){ 
        $(this).attr("src", $(this).attr("src").replace("_on.png", ".png")); 
    }); 
});
</script>

<ul id="HP_MouseOverEffect_li">
    <li><a href="#"><img src="img/menu1_on.png"></a></li>
    <li><a href="#"><img src="img/menu2.png"></a></li>
    <li><a href="#"><img src="img/menu3.png"></a></li>
    <li><a href="#"><img src="img/menu4.png"></a></li>
</ul>


2. div 를 이용한 방법
<div id="HP_MouseOverEffect_div">
    <div style="float:left; width:50%; padding-right:10px;"><img src="<?php echo G5_IMG_URL; ?>/v5/about_chart01.png" style="width:100%; max-width:545px"></div>
    <div style="float:right; width:50%; padding-left:10px;"><img src="<?php echo G5_IMG_URL; ?>/v5/about_chart02.png" style="width:100%; max-width:545px"></div>
</div>
<div style="clear:both;"></div>

<script>
// 마우스 오버할때 다른 이미지 보이기
$(function() { 
    $("#HP_MouseOverEffect_div img").hover(function(){ 
        $(this).attr("src", $(this).attr("src").replace(".png", "_on.png")); 
    }, function(){ 
        $(this).attr("src", $(this).attr("src").replace("_on.png", ".png")); 
    }); 
});
</script>


참고자료
https://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_html&wr_id=185860