[jQuery] 마우스 오버시 큰 이미지 보이기 > 팁앤테크

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

팁앤테크

[jQuery] 마우스 오버시 큰 이미지 보이기

페이지 정보

본문

<?php
$width = 400;
$height = 400;
?>
<script type="text/javascript">
    $(document).ready(function () {
        // 아래 코드는 모든 이미지 파일의 이미지명을 얻어,
        // /bigs/ 폴더에 있는 동일한 이미지를 div에 보여준다.
        $('#product img').mouseover(function () {
            $("#showImage").show(); // 이미지 보여줄 레이이 보이기
            var imgSrc = ""; // 이미지 소스 저장 변수
            imgSrc = $(this).attr("src"); // attr()로 src get하기
            imgSrc = imgSrc.substr(imgSrc.lastIndexOf("/") + 1); // 순수 파일명만 얻기
            imgSrc = "<img src='../ProductImages/bigs/" + imgSrc + "' width='<?php echo $width?>'/>"; // 큰이미지 설정
            $("#showImage").html(imgSrc); // 레이어에 HTML 추가
        });
        // 마우스 오버시 레이어 숨기기
        $('#product img').mouseout(function () {
            $("#showImage").hide(); // 레이어 숨기기
        });
    });
</script>
 
<div id="product">
    <div id="showImage" style="border:1px solid #dddddd;width:<?php echo $width?>px;height:<?php echo $height?>px;overflow:hidden;">
        
    </div>
    <img src="" height="250" width="250">
    <img src="" height="250" width="250">
    <img src="" height="250" width="250">   
</div>
추천0

댓글목록

등록된 댓글이 없습니다.

Total 825건 8 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
650 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12691 0 08-12
649 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12728 0 08-15
648 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12735 0 11-28
647 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12755 0 09-30
646 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12790 0 06-04
645 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12863 0 03-16
열람중 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12865 0 12-09
643 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12886 0 09-15
642 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12894 0 05-30
641 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12895 0 06-09
640 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12895 0 11-04
639 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12901 0 05-06
638 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12924 0 06-03
637 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12929 0 10-04
636 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12957 0 05-06
635 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12960 0 12-15
634 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12965 0 08-07
633 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12968 0 12-09
632 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12999 0 05-29
631 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12999 0 01-02
630 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13002 0 11-26
629 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13012 0 10-04
628 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13020 0 01-23
627 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13035 0 12-29
626 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13036 0 06-17

검색

회원로그인

회원가입

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒140-0011 東京都品川区東大井2-5-9-203
050-5539-7787
오픈카카오톡 (YHPLUS) :
https://open.kakao.com/o/slfDj15d

접속자집계

오늘
5,973
어제
7,971
최대
8,233
전체
1,592,396
Copyright (c) 株式会社YHPLUS. All rights reserved.