본문 바로가기

javascript

하이퍼링크 마우스 오버로 재미있는 텍스트 레이어 띄우기

<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->

<style>

#main {visibility: hidden; height:60; overflow: hidden; position: absolute; top:100; font-family: 'arial black'; color: blue;}
#notsomain {visibility: hidden; height:70; overflow: hidden; position: absolute; top:150; font-family: 'arial black'; color: blue;}
#notatallmain {visibility: hidden; height:70; overflow: hidden; position: absolute; top:200; font-family: 'arial black'; color: blue;}
#start {position:absolute; color: ffffff;}
#finalwords {visibility: hidden; position:absolute; top:340; color: ffffff;}
.ftype1 {font-size: 36pt; letter-spacing:40px;}
.ftype2 {font-size: 36pt; letter-spacing:30px;}
.ftype3 {font-size: 36pt; letter-spacing:20px;}
.ftype4 {font-size: 36pt; letter-spacing:10px;}
.ftype5 {font-size: 36pt; letter-spacing:0px;}
</style>

<script language="JavaScript">


var test = new Array
test[0] = "ftype1"  // 타잎 설정
test[1] = "ftype2"
test[2] = "ftype3"
test[3] = "ftype4"
test[4] = "ftype5"
var i=0
var j=510
var k=0

function movetext(id)
        {start.style.visibility = "hidden"
        replaceid = id
        id.className = test[0]
        id.style.left = j
        id.style.visibility = "visible"
        j -= 100
        if (j < 10)        {j = 510; changetext(replaceid)}
        else {setTimeout("movetext(replaceid)",100)}
        }

function changetext(id)
        {id.className = test[i]
        i++
        if (i > 4)
                {k++
                if (k == 1) {i=0; movetext(notsomain)}
                if (k == 2) {i=0; movetext(notatallmain)}
                if (k == 3) {finaltext()}                
                }
        else {setTimeout("changetext(replaceid)",100)}
        }
        
function finaltext()
        {finalwords.style.visibility = "visible"}
        
</script>

</HEAD>

<BODY BGCOLOR="#000000">

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


<!--링크시킬 문구-->
<p id="start" onmouseover="movetext(main)">내용을 보려면 여기를 건드려 보세요</p>


<!--사용자 문구-->
<p id="finalwords">이것은 샘플입니다<br><br><br>재미있게 응용 해 보세요<br></p>


<!--여기부터 나타낼 메세지-->
<!--ftype 을 여러가지로 바꾸어 사용해 보세요-->
<div class="ftype1" id="main">오늘의 늬우스를 말씀 드리겠습니다</div>
<div class="ftype1" id="notsomain">앞산에 뻐꾸기 두마리가 이사를 왔습니다</div>
<div class="ftype1" id="notatallmain">그렇게 해서 현재 앞산에는 총 12쌍의 뻐꾸기가 살고 있습니다</div>