본문 바로가기

javascript

테이블에 롤오버 버튼 효과를 주자

<HTML>
<HEAD>
<TITLE> 자바스크립트 소스뱅크  </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Keywords" CONTENT="JavaScript, 자바스크립트">

<!-- 1. 윈도우의 메모장 등으로 아래의 스크립트를 <HEAD>태그와 </HEAD> 태그 사이에 복사 해 넣으세요 -->

<style>
.menulines{
border:2.5px solid #F0F0F0;
}

.menulines a{
text-decoration:none;
color:black;
}
</style>

<script language="JavaScript1.2">

function over_effect(e,state){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
source4.style.borderStyle=state
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
source4.style.borderStyle=state
}
}
}

</script>

</HEAD>


<BODY>

<!-- 2. <BODY>태그와 </BODY> 태그 사이에 아래의 방식으로 코드를 복사 해 넣으세요 -->

<table border="0" align=center width="200" cellspacing="0" cellpadding="0" onMouseover="over_effect(event,'outset')" onMouseout="over_effect(event,'solid')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')" style="background-color:#F0F0F0">

<tr><td width="100%" bgcolor="orange"><font face="Arial" size="3">  <b>Main Menu</b></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2">  <a href="http://bizserver.new21.net">홈페이지</a></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2">  <a href="http://www.lycos.co.kr">라이코스 코리아</a> </font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2">  <a href="http://www.daum.net">한메일 커뮤니케이션</a> </font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2">  <a href="http://www.naver.com">네이버 홈페이지</a></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2">  <a href="http://www.hanmir.com">한미르 홈페이지</a> </font></td></tr>

</table>

</BODY>
</HTML>