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

본문 바로가기
사이트 내 전체검색

기술자료

JavaScript [jQuery] 마우스 오버하여 이미지 변경하기

페이지 정보

댓글 0건 조회 499회 작성일 2018-08-02 14:39 ~ 2018-10-12 14:47

본문

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


1. li 를 이용한 방법
<!-- // jQuery 파일을 중복호출하면 오류가 발생합니다.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
-->
<script>
// 마우스 오버할때 다른 이미지 보이기
$(function() { 
    $("#top_menu 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='top_menu'>
    <li><a href="#top"><img src="img/menu1-on.png"></a></li>
    <li><a href="#menu"><img src="img/menu2.png"></a></li>
    <li><a href="#price"><img src="img/menu3.png"></a></li>
    <li><a href="#order"><img src="img/menu4.png"></a></li>
</ul>


2. div 를 이용한 방법
<div id="HP_MouseOverEffect">
    <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 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 2,284건 1 페이지
기술자료 목록
번호 제목
공지 일반   16359  2001-08-31 11:52 ~ 2017-12-05 16:33  
2283 HTML   21  2018-10-14 01:19 ~ 2018-10-14 02:09  
2282 킴스큐   59  2018-10-04 23:04  
2281 MySQL   70  2018-10-03 02:29  
2280 MySQL   89  2018-10-02 22:55 ~ 2018-10-02 22:58  
2279 PHP   113  2018-09-30 15:07 ~ 2018-09-30 15:53  
2278 그누보드   120  2018-09-27 23:56  
2277 그누보드   102  2018-09-27 22:01 ~ 2018-09-27 22:40  
2276 그누보드   139  2018-09-22 01:04 ~ 2018-09-22 01:17  
2275 그누보드   132  2018-09-21 19:28  
2274 그누보드   167  2018-09-15 08:08 ~ 2018-10-15 14:56  
2273 PHP   224  2018-09-14 05:59  
2272 전자결제   171  2018-09-14 04:57 ~ 2018-09-14 04:58  
2271 전자결제   173  2018-09-12 14:17 ~ 2018-09-13 14:38  
2270 일반   317  2018-08-31 18:10 ~ 2018-09-14 20:50  
2269 HTML   249  2018-08-30 15:47  
2268 그누보드   253  2018-08-30 10:41 ~ 2018-08-30 10:48  
2267 PHP   231  2018-08-29 03:21 ~ 2018-08-29 17:13  
2266 JavaScript   292  2018-08-28 18:49  
2265 HTML   286  2018-08-27 14:33  
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
444
어제
2,925
최대
3,174
전체
4,316,683

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.