x x x/tip

CSS로 움직이는 롤오버 이미지 만들기

0u0. 2014. 6. 30. 00:57


" CSS로 움직이는 롤오버 이미지 만들기"

[출

처] [CSS] 롤오버 이미지 만들기|작성자 im_hee



<head>

 

<style type="text/css">
a.rollover img { border-width:0px; display:inline; } 
a.rollover img.over { display:none; } 
a.rollover:hover { border:0px } 
a.rollover:hover img { display:none; } 
a.rollover:hover img.over { display:inline; } 
</style>

 

</head>

 

<body>

 

<a href="주소" class="rollover"><img src="기본이미지"><img src="마우스 오버시 보여줄 이미지" class="over"></a>

</body>

 

 

설명

 

a href ="주소"   [해당 주소는 링크될 페이지 주소]

class="rollover" [ <head></head> 사이에 들어간 스타일시트 내용을 보면  

a.rollover img 라는 부분중 rollover 요부분은 class 가 되는부분! 

a.abcabc img 라고 생각했을경우에는 class="abcabc"가 되는것입니다.

 

img src="기본이미지"  마우스를 대기전에  보여지는 이미지주소

img src="보여줄이미지" 마우스를 대고난후 바뀔 이미지주소

[출처] [CSS] 롤오버 이미지 만들기|작성자 im_hee




출처 http://im_hee.blog.me/110114272311