<!--
// <div> 를 활용한 Layer 이동
--->
<HTML>
<head>
<script>
//------- 마우스가 글씨위에 올라갔을때 스크립트
function mouseOn()
{
var Layer = document.getElementById("div1");
//------- 객체(div1이름을 갖은 Layer) 초기화
Layer.style.left = '100px'
Layer.style.top = '80px'
//------- 객체의(div1이름을 갖은 Layer)의 위치를 설정
Layer.style.visibility="visible";
//------- (div1이름을 갖은 Layer)객체 보이게함.
}
//-------- GO-DAUM 글씨를 떠났을때 스크립트
function mouseOut()
{
var Layer = document.getElementById("div1");
//------- 객체(div1이름을 갖은 Layer) 초기화
Layer.style.visibility ='hidden';
//------- 객체(div1이름을 갖은 Layer) 안보이게함
}
//--------- GO_DAUM 글씨를 눌렀을때.
function go_page()
{
window.open("http://www.daum.net");
//---------- 새창에서 '다움' 서비스 페이지 오픈.
}
</script>
</head>
<BODY>
<hr>
<p>
<!--------------- div2 객체에 마우스를 들어왔을때 스크립트 설정------------------------------->
<div id="div2" OnMouseOver="javascript:mouseOn()" >
<table border="0" height="50">
<tr>
<td>마우스 커서를 올리세요!<p>
</td>
</tr>
</table>
</div>
<!--------------- div1 객체에 마우스를 떠났을때 스크립트 설정------------------------------->
<div id="div1" style="visibility=hidden; position:absolute;" OnMouseOut="javascript:mouseOut()">
<table border ="0" bgcolor="yellow">
<tr>
<td width="100">
<input type="button" value="Go-Daum.net" onclick="javascript:go_page()">
</td>
</tr>
</table>
</div>
<hr>
<p>
<!----------------------------------------------------------->
<!---------------- 질문2 )두번째 메뉴 색 변하기 ------------->
<!----------------------------------------------------------->
<script>
//--------- Menu1 색상변화 스크립트
function Menu1()
{
var Menu1 = document.getElementById("Menu1").style;
Menu1.backgroundColor="yellow";
}
function Menu1_Out1()
{
var Menu1 = document.getElementById("Menu1").style;
Menu1.backgroundColor="";
}
//--------- Menu2 색상변화 스크립트
function Menu2()
{
var Menu2 = document.getElementById("Menu2").style;
Menu2.backgroundColor="yellow";
}
function Menu1_Out2()
{
var Menu2 = document.getElementById("Menu2").style;
Menu2.backgroundColor="";
}
//--------- Menu3 색상변화 스크립트
function Menu3()
{
var Menu3 = document.getElementById("Menu3").style;
Menu3.backgroundColor="yellow";
}
function Menu1_Out3()
{
var Menu3 = document.getElementById("Menu3").style;
Menu3.backgroundColor="";
}
//--------- Menu4 색상변화 스크립트
function Menu4()
{
var Menu4 = document.getElementById("Menu4").style;
Menu4.backgroundColor="yellow";
}
function Menu1_Out4()
{
var Menu4 = document.getElementById("Menu4").style;
Menu4.backgroundColor="";
}
</script>
<div id="number3_layer" style="visibility=visible; position:absolute; left=50px; top=110px">
<table border="1">
<tr>
<td>
<div id="menu1" OnMouseOver ="javascript:Menu1()" OnMouseOut="Menu1_Out1()">Menu1</A></div>
</td>
<td>
<div id="menu2" OnMouseOver ="javascript:Menu2()" OnMouseOut="Menu1_Out2()">Menu2</div>
</td>
<td>
<div id="menu3" OnMouseOver ="javascript:Menu3()" OnMouseOut="Menu1_Out3()">Menu3</div>
</td>
<td>
<div id="menu4" OnMouseOver ="javascript:Menu4()" OnMouseOut="Menu1_Out4()">Menu4</div>
</td>
</tr>
</table>
</div>
<p>
<hr>
<p>
[3] 버튼이 아닌 텍스트 레이어
<p>
<!----------------------------------------------------------->
<!--------------- 세번째2 )버튼이 아닌 텍스트 레이어 -------->
<!----------------------------------------------------------->
<script>
function number_click()
{
var number3_layer = document.getElementById("number3_layer");
number3_layer.style.left = "80px";
number3_layer.style.top="230px";
}
</script>
<table>
<tr>
<td>
<div id="number3" style="cursor:hand" onclick="number_click()" ><B>여기에 마우스를 클릭하세요!</b></div>
</td>
</tr>
</table>
<p>
<hr>
</BODY>
</HTML>
'HTML & Script' 카테고리의 다른 글
| 자바스크립트 강좌, 사용법, 객체, 이벤트 등 모든것 (0) | 2008.03.06 |
|---|---|
| 동영상위에 레이어 올리기 (1) | 2008.03.06 |
| document.all 문제 해결법 (1) | 2008.01.26 |
| 파비콘(Favicon) 만드는법 & 홈페이지에 적용하는 법 (2) | 2008.01.17 |
| lib.validate.js (2) | 2007.12.07 |