마우스 오버시 부드럽게 변하는 메뉴
페이지 정보
작성일13-02-06 23:02 조회1,832회관련링크
- 예제파일 998회 연결
본문
<!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>
"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>