a.rollover img { border-width:0px; display:block; }
a.rollover img.rollover { display:none; }
a.rollover:hover { position:relative; }
a.rollover:hover img { display:none; }
a.rollover:hover img.rollover { display:block; }
</style>
<a href=http: onclick="return false" onfocus=blur() class="rollover"><img class="rollover" src="top_1_on.gif"><img src="top_1.gif"></a><br>
<a href=http: onclick="return false" onfocus=blur() class="rollover"><img class="rollover" src="top_2_on.gif"><img src="top_2.gif"></a><br>
손쉽게 이미지 롤오버를 만들 수 있다.
소스 설명
a.rollover img { border-width:0px; display:block; }
- a에 있는 img를 표시한다. 테두리는 0.
a.rollover img.rollover { display:none; }
- rollover 클래스로 지정된 img는 표시하지 않는다.
a.rollover:hover { position:relative; }
- 마우스오버일 때 위치를 고정시킨다.
a.rollover:hover img { display:none; }
- 마우스 오버일 때 표시된 img를 숨긴다.
a.rollover:hover img.rollover { display:block; }
- 마우스 오버일 때 rollover 클래스로 지정된 img를 표시한다.
<a href=http: onclick="return false" onfocus=blur() class="rollover">
- a에 rollover 클래스를 지정한다.
<img class="rollover" src=http://www.nzeo.com/images/main/top_btn_1_on.gif>
- 마우스 오버일 때 표시할 이미지에 rollover 클래스를 지정한다.
<img src=http://www.nzeo.com/images/main/top_btn_1.gif>
- 기본 이미지
</a>
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
☞자세히보기 |
|
|