스크립트
< 자료공유 < 스크립트
스크립트자료실

마우스 오버시 부드럽게 변하는 메뉴

페이지 정보

작성일13-02-06 23:02 조회1,832회

본문

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc_kr">
<title>부드럽게 변하는 메뉴</title>
<style type="text/css">
.item{font-family:lucida console;font-size:9pt;FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=0.75); FONT: 9pt/1.3 verdana; WIDTH:100px; COLOR: black; HEIGHT: 12px; BACKGROUND-COLOR:#424242;text-align:center;color:white;cursor:hand;"}
</style>
<script>
var textArr=new Array("메인으로","자기소개","게시판","자료실");
var originArr=new Array("Main","It's me","Board","Data");
 
function doTrans() {
        var eSrc=event.srcElement
        var idx=eSrc.cellIndex;
        eSrc.filters[0].apply();
        eSrc.innerText=textArr[idx];
        eSrc.style.background="#E71018";
        eSrc.filters[0].play();
}
function rollback(){
        var eSrc=event.srcElement;
        var idx=eSrc.cellIndex;
        eSrc.innerText=originArr[idx];
        eSrc.style.background="#424242";
}
</script>
</head>
<body><BR /><BR /><BR />
<table width=400 cellspacing=0 align="center">
<tr>
<td width=100 class="item" onmouseover="doTrans()" onmouseout="rollback()">Main</td>
<td width=100 class="item" onmouseover="doTrans()" onmouseout="rollback()">Intro</td>
<td width=100 class="item" onmouseover="doTrans()" onmouseout="rollback()">Board</td>
<td width=100 class="item" onmouseover="doTrans()" onmouseout="rollback()">Data</td>
</tr>
</table>
 
</body>
</html>
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기