본문 바로가기

javascript

CSS 와 텍스트 만으로 롤오버 이미지 같은 효과를 만들어 보자

<!--1. 아래의 코드를 <HEAD></HEAD>사이에 복사해 넣으세요-->

<STYLE>        
<!--
.exp2 {text-decoration: none}
.mailme {text-decoration: none; font: bold; color: blue}
.mailme:hover {text-decoration: underline; font: bold; color: blue}
.mailme:active {text-decoration: none; font: bold; color: white; background: blue}
-->
</STYLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<!--2. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->

<!--첫번째 롤오버 효과-->

<A HREF="#" onMouseOver="logo1.style.visibility='hidden',logo2.style.visibility='visible'">
                <SPAN ID="logo1" STYLE="cursor: hand; position: absolute; visibility: visible; left: 10px; top: 0px; font-size: 30pt; font-family: Arial Black; color: DodgerBlue; filter: Alpha(Opacity=0,FinishOpacity=130,Style=1,StartX=0,StartY=90,FinishX=0,FinishY=30) glow(color=black,strength=1)">
                <!-- 마우스 오버시 보여줄 메세지 -->
                Example 1
                </SPAN>
</A>

<A HREF="#" onMouseOut="logo1.style.visibility='visible',logo2.style.visibility='hidden'">
                <SPAN ID="logo2" STYLE="cursor: hand; position: absolute; visibility: hidden; left: 10px; top: 0px; font-size: 30pt; font-family: Arial Black; color: orange; filter: Alpha(Opacity=0,FinishOpacity=130,Style=1,StartX=0,StartY=90,FinishX=0,FinishY=30) glow(color=black,strength=1)">
                <!-- 마우스 아웃시 보여줄 메세지 -->
                Example 1
                </SPAN>
</A>

<!-- 2번째 롤오버 효과 -->

<A CLASS="exp2" HREF="#" onMouseOver="image1.style.visibility='hidden',image2.style.visibility='visible'">
                <SPAN ID="image1" STYLE="cursor: hand; position: absolute; visibility: visible; left: 30px; top: 60px; font-size: 30pt; color: blue">
                <!-- 마우스 오버시 메세지 -->
                Example 2
                </SPAN>
</A>

<A CLASS="exp2" HREF="#" onMouseOut="image1.style.visibility='visible',image2.style.visibility='hidden'">
                <SPAN ID="image2" STYLE="cursor: hand; position: absolute; visibility: hidden; left: 30px; top: 60px; font-size: 30pt; color: blue; filter: glow(color=aqua,strength=2)">
                <!-- 마우스 아웃시 메세지 -->
                Example 2
                </SPAN>
</A>