[jQuery] 마우스 오버하여 이미지 변경하기 > 기술자료 | 해피정닷컴

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

본문 바로가기

사이트 내 전체검색

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

JavaScript [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

댓글목록

등록된 댓글이 없습니다.


Total 152건 1 페이지
  • RSS
기술자료 목록
152
JavaScript   1374  2024-02-16 18:50 ~ 2024-02-16 20:37  
151
JavaScript   2735  2023-08-01 23:01 ~ 2023-08-01 23:35  
150
JavaScript   3835  2023-02-27 17:26 ~ 2023-12-06 08:33  
149
JavaScript   4141  2023-02-22 17:33 ~ 2023-02-24 21:08  
148
JavaScript   4459  2023-01-27 17:42  
147
JavaScript   5525  2022-12-06 10:30 ~ 2022-12-06 13:11  
146
JavaScript   7738  2022-07-28 16:08 ~ 2022-07-28 16:13  
145
JavaScript   4912  2021-11-26 20:23  
144
JavaScript   7017  2021-09-14 19:34 ~ 2021-09-15 17:06  
143
JavaScript   5433  2021-08-18 15:13  
142
JavaScript   6211  2021-06-15 22:02  
141
JavaScript   5362  2021-05-13 17:23 ~ 2021-05-13 17:34  
140
JavaScript   6630  2020-12-24 19:40  
139
JavaScript   6873  2019-10-02 22:05 ~ 2019-10-04 16:13  
138
JavaScript   7426  2019-05-02 02:10  
137
JavaScript   7815  2019-02-08 18:37 ~ 2019-02-08 19:32  
136
JavaScript   11417  2018-08-28 18:49 ~ 2022-06-13 22:38  
열람
JavaScript   22011  2018-08-02 14:39 ~ 2019-11-24 22:20  
134
JavaScript   9221  2018-07-25 14:30 ~ 2018-09-21 08:36  
133
JavaScript   7263  2018-07-23 14:43 ~ 2018-07-23 16:45  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.