필터를이용한 롤오버효과 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > HTML > DHTML 관련 > 기본 소스 > 필터를이용한 롤오버효과 상세정보

클라우드태그

Javascript

php

CSS

html

asp

API

jquery

mysql

image

mobile

slide

게시판

메뉴

현재접속자 27명

필터를이용한 롤오버효과

해피팀

네티즌

소스분류

기본 소스

다운로드 횟수

1357 회

간단설명

이미지에 필터효과를 이용한 흑백전환 스타일시트와,불투명도를 조정한 롤오버 예제입니다.

평가하기

1. 불투명도를 조정한 롤오버 예제 
<a href="#" onMouseOut="menu01.style.filter='alpha(opacity=50)';" onMouseOver="menu01.style.filter = 'none';"><img src="http://demo.happycgi.com/jini/pick1.jpg" width="100" height="70" name="menu01" border="0" STYLE='filter:alpha(opacity=50);'></a>

-style filter를 이용한 태그입니다 A링크에 onMouseOut에 name값을 입력해주신다음 filter에 opacity값을 입력해줍니다.

<a href="#" onMouseOut="menu02.style.filter='alpha(opacity=50)';" onMouseOver="menu02.style.filter = 'none';"><img src="http://demo.happycgi.com/jini/pick2.jpg" width="100" height="70" name="menu02" border="0" STYLE='filter:alpha(opacity=50);'></a>
<a href="#" onMouseOut="menu03.style.filter='alpha(opacity=50)';" onMouseOver="menu03.style.filter = 'none';"><img src="http://demo.happycgi.com/jini/pick3.jpg" width="100" height="70" name="menu03" border="0" STYLE='filter:alpha(opacity=50);'></a>

2. 롤오버시 흑백->칼라로 전환 
<a href="#" onMouseOut="menu04.style.filter='gray';" onMouseOver="menu04.style.filter = 'none';"><img src="http://demo.happycgi.com/jini/pick4.jpg" width="100" height="70" name="menu04" border="0" STYLE='filter:gray();'></a>
<a href="#" onMouseOut="menu05.style.filter='gray';" onMouseOver="menu05.style.filter = 'none';"><img src="http://demo.happycgi.com/jini/pick5.jpg" width="100" height="70" name="menu05" border="0" STYLE='filter:gray();'></a>
<a href="#" onMouseOut="menu06.style.filter='gray';" onMouseOver="menu06.style.filter = 'none';"><img src="http://demo.happycgi.com/jini/pick6.jpg" width="100" height="70" name="menu06" border="0" STYLE='filter:gray();'></a>

3. 롤오버시 칼라->흑백으로 전환 
<a href="#" onMouseOut="menu07.style.filter='none';" onMouseOver="menu07.style.filter = 'gray';"><img src="http://demo.happycgi.com/jini/pick7.jpg" width="100" height="70" name="menu07" border="0" ></a>
<a href="#" onMouseOut="menu08.style.filter='none';" onMouseOver="menu08.style.filter = 'gray';"><img src="http://demo.happycgi.com/jini/pick8.jpg" width="100" height="70" name="menu08" border="0" ></a>
<a href="#" onMouseOut="menu09.style.filter='none';" onMouseOver="menu09.style.filter = 'gray';"><img src="http://demo.happycgi.com/jini/pick9.jpg" width="100" height="70" name="menu09" border="0" ></a>

각각의 예제들은 모두 응용한것임으로 한번쯤 사용해보시고 적용시켜 보시길 바랍니다.