이미지 마우스 올리면 변하게 하고싶어요

이미지 마우스 올리면 변하게 하고싶어요

QA

이미지 마우스 올리면 변하게 하고싶어요

본문

http://s-bank.co.kr 

 

메인 이미지나 상단 메뉴에 마우스를 올리면 이미지가  변하게 하고싶은데

 

이미지는 준비를 해놨는데 어떻게 해야하나요?

이 질문에 댓글 쓰기 :

답변 1

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>        

        #imgDiv {

            width:  160px; //이미지 가로 사이즈

            height: 210px; //이미지 세로 사이즈

            position:   absolute;

            border: 2px solid lightseagreen;

        }

 

 

 

        #imgDiv img {                         // 두개의 이미지 위치를 똑같이 맞춰줘야 합니다.

            width:  150px;

            height: 200px;

            position:   absolute;

            left:   50%;

            top:    50%;

            margin-left:    -75px;

            margin-top:     -100px;

        }

 

 

        #imgDiv > #funny {                    

            opacity:    0;

            transition: opacity 1s

        }

 

        #imgDiv:hover > #funny {

            opacity:    1;

        }                                   

    </style>

</head>

<body>

 

<div id="imgDiv">

    <img id="serious" src="첫번째 이미지주소.jpg"> <!-- 첫출력 이미지 -->

    <img id="funny" src="두번째 이미지주소.jpg"><!-- 마우스 오버시 변경 이미지 -->

</div>

 

</body>

</html>

 

이외에도, 자바스크립트나 jquery등 방법은 많으니,

구글에서 검색해 보시면, 많이 나올겁니다.

(검색어 : 마우스 오버 이미지)

답변을 작성하시기 전에 로그인 해주세요.
전체 123,122 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT