BLOG ARTICLE WEB/Javascript | 19 ARTICLE FOUND
- 2006.09.06 작업중
- 2006.06.07 [유용한팁] 유용한 자바스크립트 팁모음3
- 2006.06.07 [유용한팁] 유용한 자바스크립트 팁모음2
- 2006.06.07 [유용한팁] 유용한 자바스크립트 팁모음1
invalid-file
====================================================================
다중 셀렉트~
====================================================================
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
#sub1, #sub2, #sub3
{ position: absolute;left: 180px;visibility: hidden;z-index: 3}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
catnumber = 3 // 카테고리의 갯수 설정
offset = 150
performOnchange = false
if (document.all) {
docObj = "document.all."
styleObj = ".style"
} else {
docObj = "document."
styleObj = ""
}
function openselect(subcat) {
popupselect = eval(docObj + subcat + styleObj)
popupselect.visibility = "visible"
}
function closeselect(submenu,subcat){
popupselect = eval(docObj + subcat + styleObj)
if (submenu.selectedIndex != 0) {
popupselect.visibility = "hidden"
numchoice = submenu.selectedIndex
choice = submenu[numchoice].value
myForm.subcategory.value = choice
submenu.selectedIndex = 0
}
}
function lock() {
performOnchange = false
}
function unlock() {
performOnchange = true
}
function selectSub(cat) {
for (i=1; i <= catnumber; i++) {
subcat = "sub" + i
popupselect = eval(docObj + subcat + styleObj)
popupselect.visibility = "hidden"
}
if (performOnchange == true) {
letsopen = "sub" + cat.selectedIndex
if (letsopen == "sub0") {
alert("카테고리를 선택 해 주세요")
choice = "- 서브 카테고리 -"
myForm.subcategory.value = choice
cat.focus()
} else {
openselect(letsopen)
lock()
}
}
}
// -->
</script>
</HEAD>
<BODY>
<!---- 첫번째 서브 카테고리 설정 ----->
<span id="sub1">
<select name="sub_singer" onchange="closeselect(this,'sub1')">
<option selected value="">- 서브 카테고리 -
<option value="1">1
<option value="2">2
<option value="3">3
</select>
</span>
<!---- 두번째 서브 카테고리 설정 ----->
<span id="sub2">
<select name="sub_hobby" onchange="closeselect(this,'sub2')">
<option selected value="">- 서브 카테고리 -
<option value="가">가
<option value="나">나
<option value="다">다
</select>
</span>
<!---- 세번째 서브 카테고리 설정 ----->
<span id="sub3">
<select name="sub_int" onchange="closeselect(this,'sub3')">
<option selected value="">- 서브 카테고리 -
<option value="A">A
<option value="B">B
<option value="C">C
</select>
</span>
<!---- 메인 카테고리 설정 ----->
<select name="main_category" onmouseover="unlock()" onchange="selectSub(this)">
<option selected value="">-- 카테고리 선택 --
<option value="숫자">숫자
<option value="한글">한글
<option value="영어">영어
</select>
<p>
<form name=myForm action="">
<input type="text" name="subcategory" readonly="readonly" value="- 서브 카테고리 -">
<input type=submit value=" 전송 ">
<!------------------------- 여기까지 ---------------------------------->
</BODY>
</HTML>
====================================================================
====================================================================
td 에 스크롤바 생성하기
====================================================================
<table border=0 width=0 height=0 cellspacing=0 cellpadding=0>
<tr>
<td width=200 height=100 valign="top">
<div style="overflow-y:scroll; width:200; height:100; padding:4px">
내용
</div>
</td>
</tr>
</table>
====================================================================
====================================================================
마우스 오른쪽 단추 클릭시 강제이동시키기
====================================================================
script language="JavaScript">
<!--
function click() {if (event.button==2) {
alert('오른쪽마우스 클릭했을때 할말');
location.href="페이지넘길 주소";
}
}
document.onmousedown=click
// -->
</script>
====================================================================
====================================================================
그림에 마우스 오버만 해도 링크 이동
====================================================================
<a href="" onmouseover="parent.location='이동될 주소'"><img src="이미지주소" border="0">
====================================================================
====================================================================
시작과 멈춤이 가능한 스크롤 텍스트
====================================================================
<marquee id="scroller" direction=up scrollAmount=5 width=200 height=150 style="background-color:#eeeeee;border:1px dot #999999">
여기에 원하는 글을 쓰세요 ^_^
</marquee>
<center>
<a href="scroller.start()">시작</a> <a href="scroller.stop()">멈춤</a>
<script language="JavaScript1.2">
if (document.all)
scroller.stop()
</script>
====================================================================
====================================================================
이미지 슬라이드(마우스오버시멈춤)
====================================================================
<script language="JavaScript1.2">
<!--
/*
Conveyor belt slideshow script-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
//Specify the slider's width (in pixels)
var sliderwidth=330
//Specify the slider's height (in pixels, pertains only to NS)
var sliderheight=145
//Specify the slider's scroll speed (larger is faster)
var slidespeed=4
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="#"><img src="http://skydare.net/img/benner1.gif"; width="90" height="30" border=0></a>'
leftrightslide[1]='<a href="#"><img src="http://skydare.net/img/benner2.gif"; width="90" height="30" border=0></a>'
leftrightslide[2]='<a href="#"><img src="http://skydare.net/img/benner3.gif"; width="90" height="30" border=0></a>'
leftrightslide[3]='<a href="#"><img src="http://skydare.net/img/benner1.gif"; width="90" height="30" border=0></a>'
leftrightslide[4]='<a href="#"><img src="http://skydare.net/img/benner2.gif"; width="90" height="30" border=0></a>'
///////do NOT edit pass this line////////////////////////////////////
var copyspeed=slidespeed
//copy contents of leftrightslide into one variable
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide[i]+" "
if (document.all){
//dynamically write out the marquee tag
document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')
//stop marquee when mouse is over it
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
//re-enable marquee when mouse is out
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
document.ns_slider01.visibility="show"
setTimeout("window.onresize=regenerate",450)
intializeleftrightslide()
}
if (document.all)
ieslider.scrollAmount=slidespeed
}
//NS specific function for initializing slider upon page load
function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
document. ns_slider01.document.ns_slider02.document.close()
thelength=document.ns_slider01.document.ns_slider02.document.width
scrollslide()
}
//NS specific function for sliding slideshow
function scrollslide(){
if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
document.ns_slider01.document.ns_slider02.left-=slidespeed
setTimeout("scrollslide()",100)
}
else{
document.ns_slider01.document.ns_slider02.left=sliderwidth
scrollslide()
}
}
window.onload=regenerate2
//-->
</script>
<font color="#000000>
<ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide>
<!--~============ LAYER ============~-->
</font><layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed" id="layer1" left="50" top="50" width="200" height="200" z-index="1"></layer>
<!--~========== END LAYER ==========~-->
</ilayer>
출처:하늘다래
====================================================================
====================================================================
html문서 없이 새창으로 이미지 띄우기
====================================================================
<img src="이미지주소" name="ranimage" border="0">
<script language="JavaScript1.1">
<!--
document.ranimage.src="이미지가 들어있는 폴더"+Math.round(Math.random()*3+.4)+".gif";
// -->
</script>
출처: 하늘다래
====================================================================
====================================================================
쿠키를 이용해서 광고창 제어하는 소스
====================================================================
<html>
<head>
<title>Untitled</title>
</head>
<body>
<SCRIPT language="JavaScript">
<!--
function setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function closeWin()
{
if ( document.test.chkbox.checked ){
setCookie( "notice0428", "done" ,30 );
}
self.close();
}
// -->
</SCRIPT>
<form name="test">
<p>여기에 원하시는 내용을 넣습니다.
<INPUT TYPE=CHECKBOX NAME="chkbox"><B>Do not open this window next time</B></font>
<input type=button value="close" onClick="closeWin();">
</form>
</body>
</html>
<!--start sima--><center><input type="button" value="View Source" onClick='window.location="view-source:"+window.location.href'><!--end sima-->
====================================================================
====================================================================
배경이 위쪽에만 나오게 하는 또다른 방법
====================================================================
<body bgcolor="" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="http://happyscript.com/testimage/bg3.jpg"; style="background-repeat:repeat-x" >
위쪽에만 반복적으로 나옵니다. ====================================================================
====================================================================
텍스트박스 안에 배경 이미지 넣기 textarea
====================================================================
<body>
일반 img tag을 이용해서 부른 경우입니다.<br>
<img src="http://happyscript.com/testimage/bg1.jpg"; xwidth=177 xheight=17 alt="" border="0">
<br>
텍스트박스(textare) 안에 스타일을 이용해서 배경이미지를 넣은 경우입니다.<br>
<textarea style="background-image:url(http://happyscript.com/testimage/bg1.jpg); width=313; height=416">
배경이미지와 텍스트가 같이 있습니다.
여기에서 텍스트를 입력할 수 있습니다.
====================================================================
배경색과 글자색을 바꿔주는 소스
====================================================================
<SCRIPT LANGUAGE="JavaScript">
<!--
function color() {
document.bgColor=(""+ colc.cc.value +""); // 배경색 부분
document.body.text=(""+ colc.tc.value +""); // 글자색 부분
}
//-->
</script>
<!--
폼 구성 부분
색 추가시는 간단히 option만 복사하여 늘려준 후 색을 적어주면 된다.
색은 아무거나 적어도 됨.. EX) black,#000000
//-->
<form name="colc">
<table border="1">
<tr>
<td colspan="2" align="center">
<b>Color Change</b>
</td>
</tr>
<tr>
<td align="center">
<b>배경색</b>
</td>
<td align="center">
<select name="cc" size="1">
<option value="black">Black
<option value="blue">Blue
<option value="green">Green
<option value="skyblue">Light Blue
<option value="orange">Orange
<option value="purple">Purple
<option value="red">Red
<option value="silver">Silver
<option value="Yellow">Yellow
<option selected value="white">White
</select>
</td>
</tr>
<tr>
<td align="center">
<b>글자색</b>
</td>
<td align="center">
<select name="tc" size="1">
<option selected value="black">Black
<option value="blue">Blue
<option value="green">Green
<option value="skyblue">Light Blue
<option value="orange">Orange
<option value="purple">Purple
<option value="red">Red
<option value="silver">Silver
<option value="Yellow">Yellow
<option value="white">White
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="button" value="바꾸기" onclick="color()" style="width:100%">
</td>
</tr>
</table>
</form><input type=button name=simabuttonviewsource value="View Source" onClick='window.location="view-source:"+window.location.href'>
====================================================================
====================================================================
하루중 시간대에 따라 배경이 다른 자스
====================================================================
<script language="JavaScript">
<!-- Hide From Old Browsers
day=new Date() //..get the date
x=day.getHours() //..get the hour
if(x>=0 && x<4) {
document.write('<body background="../../../testimage/bg1.jpg">')
} else
if(x>=4 && x<12) {
document.write('<body background="../../../testimage/bg2.jpg">')
} else
if(x>=12 && x<18) {
document.write('<body background="../../../testimage/bg3.jpg">')
} else
if (x>=18 && x<24) {
document.write('<body background="../../../testimage/bg4.jpg">')
}
<!-- End Hiding -->
</script>
====================================================================
====================================================================
배경화면이 움직이는 자스
====================================================================
<BODY>
<script language="Javascript">
<!--
var background = "../../../testimage/bg8.jpg";
var speed = 0;
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName != "Netscape" || browserVer >= 6) {
function moveback(movert,movedn,hPos,vPos) {
if (arguments[4])
document.body.style.backgroundImage = "url("" + arguments[4] + "")";
if (arguments[5])
document.body.style.backgroundRepeat = arguments[5]
if (!isNaN(hPos)) {
if ((movert!=0) && (hPos>0)) hPos=-100000
hPos += movert
}
if (!isNaN(vPos)) {
if ((movedn!=0) && (vPos>0)) vPos=-100000
vPos+= movedn
}
document.body.style.backgroundPosition= hPos + " " + vPos
if (isNaN(hPos)) hPos = """ + hPos + """
if (isNaN(vPos)) vPos = """ + vPos + """
setTimeout("moveback("+movert+","+movedn+","+hPos+","+vPos+")",speed)
}
moveback(1,1,0,0, background);
}
//-->
</script>
====================================================================
색이 줄단위로 바뀌는 테이블
====================================================================
<table border="0" width="500" height="200">
<tr onMouseOver="this.style.backgroundColor='#E8F6FF';return true;" onMouseOut="this.style.backgroundColor=''; return true;">
<td align=center><a href="'./sima_bbs.cgi?)">색이 줄단위로 바뀌는 테이블</a></font></td>
<td>--------------------------</td>
</tr>
</table>
====================================================================
====================================================================
페이지 들어갈때 배경색을 정하고 들어가는 소스
====================================================================
<body bgcolor="white" onload="var bg = prompt('색상코드를 입력해 주세요! 예: FF00FF',''); document.bgColor=bg;"><input type=button name=simabuttonviewsource value="View Source" onClick='window.location="view-source:"+window.location.href'>
====================================================================
====================================================================
색상-테이블의 색이 차츰차츰 변하게하는 자스 예제
====================================================================
<html>
<head>
<title>http://perlbbs.com<;/title>
<script language="javascript">
<!--
var tInC=null;
var tIdC=null;
var tIdCOn = new Array(0,0,0,0,0,0);
var tIdCOff = new Array(1,1,1,1,1,1);
function tBgFIn(obj, col,idNum) {
if(tInC != obj && tInC != null && tIdCOn[idNum] == 0) tBgFOut(tInC,tIdC);
if(tIdCOn[idNum] == 0) {
tIdCOn[idNum] = 1;
tIdCOff[idNum] = 0;
tInC=obj;
tIdC=idNum;
changeColor(obj, col);
}
}
function tBgFOut(obj,idNum) {
if(tIdCOff[idNum] == 0) {
tIdCOff[idNum] = 1;
tIdCOn[idNum] = 0;
changeColor(obj, "#ffffff");
}
}
function changeColor(obj, col) {
obj.filters.blendTrans.apply();
obj.style.backgroundColor= col;
obj.filters.blendTrans.play();
}
//-->
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<TABLE border=0 width=100%>
<TR>
<TD colSpan=2 align=center>
<TABLE border=2 borderColor=#ff9900 cellPadding=3 cellSpacing=3
style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px">
<TR><!-- 1 -->
<TD align=middle id=bgColorId1
onmouseover="tBgFIn(bgColorId1, '#CCFFCC',1)"
style="BACKGROUND-COLOR: #ffffff; FILTER: blendTrans(duration=0.3)"
vAlign=top width=120>
<TABLE bgColor=#ffff99 border=0
style="BORDER-TOP: rgb(255,153,0) 2px solid" width="100%">
<TR>
<TD width=100>
<P align=center><A
href="http://perlbbs.com"; terget=new><FONT
color=blue><B>마우스를 여기로 옮겨보세요</B></FONT></A></P></TD></TR></TABLE>
<P>이 테이블의 색이 점차적으로 변합니다.<BR></P></TD>
<TD align=middle id=bgColorId2
onmouseover="tBgFIn(bgColorId2, '#CCFFFF',2)"
style="BACKGROUND-COLOR: #ffffff; FILTER: blendTrans(duration=0.5)"
vAlign=top width=120>
<TABLE bgColor=#ffff99 border=0
style="BORDER-TOP: rgb(255,153,0) 2px solid" width="100%">
<TR>
<TD width=100>
<P align=center><A
href="http://perlbbs.com"; terget=new><FONT
color=blue><B>마우스를 여기로 옮겨보세요</B></FONT></A></P></TD></TR></TABLE>
<P>이 테이블의 색이 점차적으로 변합니다.<BR></P></TD>
<TD align=middle id=bgColorId3
onmouseover="tBgFIn(bgColorId3, '#FFFFCC',3)"
style="BACKGROUND-COLOR: #ffffff; FILTER: blendTrans(duration=0.5)"
vAlign=top width=120>
<TABLE bgColor=#ffff99 border=0
style="BORDER-TOP: rgb(255,153,0) 2px solid" width="100%">
<TR>
<TD width=100>
<P align=center><A
href="http://perlbbs.com"; terget=new><FONT
color=blue><B>마우스를 여기로 옮겨보세요</B></FONT></A></P></TD></TR></TABLE>
<P>이 테이블의 색이 점차적으로 변합니다.<BR></P></TD>
</TR></TABLE>
</body>
</html>
<!--start sima--><center><input type="button" value="View Source" onClick='window.location="view-source:"+window.location.href'><!--end sima-->
====================================================================
====================================================================
multiple select에 추가하는 예제~~
====================================================================
<HTML>
<HEAD>
<TITLE>apoka.net</TITLE>
<Script language=javascript>
<!--
function addPrd()
{
var frm = document.frmName1;
var add_value = frm.prd_group1[frm.prd_group1.selectedIndex].value;
var add_text = frm.prd_group1[frm.prd_group1.selectedIndex].text;
frm.prd_insert.options[frm.prd_insert.options.length] = new Option(add_text,add_value);
}
//-->
</script>
</HEAD>
<BODY>
<form name="frmName1">
<select name="prd_group1" style="width:190px;">
<option value="" selected>==대분류==</option>
<option value="01">apoka1</option>
<option value="02">apoka2</option>
<option value="03">apoka3</option>
<option value="04">apoka4</option>
</select>
<input type="button" value="추가" name="insetOK" onClick="addPrd()">
<select name="prd_insert" multiple style="width:100px;">
</select>
</form>
</BODY>
</HTML>
====================================================================
====================================================================
서브메뉴~~~~
====================================================================
<html>
<head>
<SCRIPT language=javascript>
var old='';
function menu(name)
{
submenu=eval("submenu_"+name+".style");
if(old!=submenu)
{
if(old!='')
{
old.display='none';
}
submenu.display='block';
old=submenu;
}
else
{
submenu.display='none';
old='';
}
}
</SCRIPT>
</head>
<body>
<a onclick="menu(1);" style="CURSOR:hand"><b>메뉴1</b></a>
<br>
<span id=submenu_1 style="DISPLAY: none;">
서브메뉴<br>
서브메뉴<p>
</span>
<a onclick="menu(2);" style="CURSOR:hand"><b>메뉴2</b></a>
<span id=submenu_2 style="DISPLAY: none;">
서브메뉴<br>
서브메뉴<p>
</span></body>
</html>
====================================================================
====================================================================
마우스 갖다대면 서브메뉴가~~
====================================================================
<html>
<head>
<title></title>
</head>
<style type="text/css">
<!--
body {font-family: "고딕", "Helvetica", "sans-serif"; font-size: 10px; xline-height:150%; color: #000000}
table {font-family: "고딕", "Helvetica", "sans-serif"; font-size: 10px; xline-height:100%; color: #000000}
A:link { text-decoration: none; color:#333333}
a:visited { color: #333333; text-decoration: none}
a:hover { color: blue; text-decoration: underline} -->
</style>
<script language="javascript">
<!--
var main_cnt = 6
function showhide(num) {
for (i=1; i<=main_cnt; i++) {
menu=eval("document.all.block"+i+".style");
imgch=eval("document.bar"+i);
if (num==i) {
if (menu.display=="block") {
menu.display="none";
imgch.src="+.gif";
}else {
menu.display="block";
imgch.src="-.gif";
}
//}else {
// menu.display="none";
// imgch.src="+.gif";
}
}
}
function show(num) {
for (i=1; i<=main_cnt; i++) {
menu=eval("document.all.block"+i+".style");
imgch=eval("document.bar"+i);
if (num==i) {
menu.display="block";
imgch.src="-.gif";
}else {
menu.display="none";
imgch.src="+.gif";
}
}
}
//-->
</script>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
document.cookie.expires="0";
</SCRIPT>
<center>
<TABLE borderColor=white cellSpacing=0 cellPadding=0 width=135 border=1>
<TR>
<TD xonclick="showhide(1);" onmouseover="this.style.backgroundColor='#ffffcc'; show(1);" style="CURSOR: hand" onmouseout="this.style.backgroundColor=''" borderColorLight=gray bgColor=#cccccc gray #e4e4e4 xheight=14>
<IMG name=bar1 src="+.gif" border=0 width=12 height=12>
A</TD>
</TR>
<TR>
<TD>
<SPAN id=block1 style="DISPLAY:none; MARGIN-LEFT:1px; xCURSOR:hand">
<TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 border=1 WIDTH="100%">
<TR height=12px onmouseover="this.style.backgroundColor='#ffffcc'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target=_top>
A-1</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ffffcc'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
A-2</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
A-3</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
A-4</a>
</TD></TR>
</TABLE>
</span>
</td>
</tr>
<TR>
<TD xonclick="showhide(2);" onmouseover="this.style.backgroundColor='#ccddff'; show(2);" style="CURSOR: hand" onmouseout="this.style.backgroundColor=''" borderColorLight=gray bgColor=#cccccc gray #e4e4e4 xheight=14>
<IMG name=bar2 src="+.gif" border=0 width=12 height=12>
<xa href="http://apoka.net"; target=_top>
B</a></TD>
</TR>
<TR>
<TD>
<SPAN id=block2 style="DISPLAY:none; MARGIN-LEFT:1px; xCURSOR:hand">
<TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 border=1 WIDTH="100%">
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
B-1</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
B-2</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
B-3</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<xA href="sub1-1">
B-4</a>
</TD></TR>
</TABLE>
</span>
</td>
</tr>
<TR>
<TD xonclick="showhide(3);" onmouseover="this.style.backgroundColor='#ccddff'; show(3);" style="CURSOR: hand" onmouseout="this.style.backgroundColor=''" borderColorLight=gray bgColor=#cccccc gray #e4e4e4 xheight=14>
<IMG name=bar3 src="+.gif" border=0 width=12 height=12>
<xa href="http://apoka.net"; target=_top>
C</a></TD>
</TR>
<TR>
<TD>
<SPAN id=block3 style="DISPLAY:none; MARGIN-LEFT:1px; xCURSOR:hand">
<TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 border=1 WIDTH="100%">
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
C-1</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
C-2 </a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
C-3</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
C-4</a>
</TD></TR>
</TABLE>
</span>
</td>
</tr>
<TR>
<TD xonclick="showhide(4);" onmouseover="this.style.backgroundColor='#ccddff'; show(4);" style="CURSOR: hand" onmouseout="this.style.backgroundColor=''" borderColorLight=gray bgColor=#cccccc gray #e4e4e4 xheight=14>
<IMG name=bar4 src="+.gif" border=0 width=12 height=12>
<xa href="http://apoka.net"; target=_top>
D</a></TD>
</TR>
<TR>
<TD>
<SPAN id=block4 style="DISPLAY:none; MARGIN-LEFT:1px; xCURSOR:hand">
<TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 border=1 WIDTH="100%">
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
D-1</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
D-2</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
D-3</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
D-4</a>
</TD></TR>
</TABLE>
</span>
</td>
</tr>
<TR>
<TD xonclick="showhide(5);" onmouseover="this.style.backgroundColor='#ccddff'; show(5);" style="CURSOR: hand" onmouseout="this.style.backgroundColor=''" borderColorLight=gray bgColor=#cccccc gray #e4e4e4 xheight=14>
<IMG name=bar5 src="+.gif" border=0 width=12 height=12>
<xa href="http://apoka.net"; target=_top>
E</a></TD>
</TR>
<TR>
<TD>
<SPAN id=block5 style="DISPLAY:none; MARGIN-LEFT:1px; xCURSOR:hand">
<TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 border=1 WIDTH="100%">
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<xA href="sub1-1">
E-1</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
E-2</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
E-3</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="right">
E-4</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<xa href="http://apoka.net"; target="right">
E-5</a>
</TD></TR>
</TABLE>
</span>
</td>
</tr>
<TR>
<TD xonclick="showhide(6);" onmouseover="this.style.backgroundColor='#ccddff'; show(6);" style="CURSOR: hand" onmouseout="this.style.backgroundColor=''" borderColorLight=gray bgColor=#cccccc gray #e4e4e4 xheight=14>
<IMG name=bar6 src="+.gif" border=0 width=12 height=12>
<xa href="http://apoka.net"; target=_top>
F</a></TD>
</TR>
<TR>
<TD>
<SPAN id=block6 style="DISPLAY:none; MARGIN-LEFT:1px; xCURSOR:hand">
<TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 border=1 WIDTH="100%">
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="new">
F-1</a>
</TD></TR>
<TR height=12px onmouseover="this.style.backgroundColor='#ccddff'" onmouseout="this.style.backgroundColor=''" bgColor=#e4e4e4 borderColorLight=gray>
<TD align=right valign=center>
<a href="http://apoka.net"; target="new">
F-2</a>
</TD></TR>
</TABLE>
</span>
</td>
</tr>
</table>
</body>
</html>
====================================================================
가장 많이 사용되어지는 레이어메뉴 자바스크립트
<script Language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<body>부분..........
<span onMouseOver="MM_showHideLayers('layer1','','show','layer2','','hide')" style="cursor:hand">주메뉴1</span>
<br><br><span onMouseOver="MM_showHideLayers('layer1','','hide','layer2','','show')" style="cursor:hand">주메뉴2</span>
<div id="layer1" style="width:100px; height:200px; position:absolute; left:100px; top:85px; z-index:3; visibility:hidden;">
<a href="#">부메뉴</a><br>
<a href="#">부메뉴</a>
</div>
<div id="layer2" style="width:100px; height:200px; position:absolute; left:100px; top:108px; z-index:2; visibility:hidden;">
<a href="#">부메뉴</a><br>
<a href="#">부메뉴</a>
</div>
----------------------------------------------------------------------------------------------------------------------------------
5초후 자동으로 새창 띄우기
----------------------------------------------------------------------------------------------------------------------------------
html>
<head>
<title>apoka.net</title>
</head>
<body onload=cnt()>
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<form name="form1" method="get">
<p align="center"><font size="2"><b><br> 5초후 자동으로 이동 합니다.</b></font><br>
<br>
<input type="text" name="text1" size="2" style="font-family:'Comic Sans MS'; font-size:60pt; text-align:center; border-width:0; border-style:solid;" readonly><br> <br>
</td>
</tr>
</table>
<script language="JavaScript">
<!--
if(document.all)document.write('<embed src="tting.wav" width="100" height="100" border="0" hidden="true" autostart="false"><embed src="tting2.wav" width="100" height="100" border="0" hidden="true" autostart="false">')
if(document.all)document.write('<bgsound id="kts">')
var timer1=null
var a=5
function cnt(){
form1.text1.value = a
a--
kts.src='tting.wav'
timer1=setTimeout('cnt()',1000)
if(a==-1){
kts.src='tting2.wav';
clearTimeout(timer1);
newwin= window.open('http://devpia.com','new','toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,resizeable=yes,width=1024,height=768,top=0,left=0')
}
}
//-->
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------
체크하면 테이블 색깔 바꾸기
----------------------------------------------------------------------------------------------------------------------------------
<html>
<SCRIPT LANGUAGE="JavaScript">
<!--
function check_user()
{
if (document.form.test1.checked == true)
{
obj1 = link_table.rows[0]; // 요건 테이블에 id를 주어서 거기의 row(즉 tr이 되겠죠.)를 변수로 선언하고
// obj1 = link_table.rows["aa"]; // 일케 해도 되요..
obj1.style.background = "red"; // 고넘의 속성을 변경시키는 겁니다.
}
else
{
obj1 = link_table.rows[0];
obj1.style.background = "white";
}
}
//-->
</SCRIPT>
<form name="form">
<BODY >
<table id="link_table" width="500" border="1">
<tr id="aa">
<td align=center ><input name="test1" type="checkbox" OnClick="check_user()"></td>
<td align=center >메뉴 1</td>
<td align=center >메뉴 2</td>
</tr>
</table>
</BODY>
</form>
</HTML>
----------------------------------------------------------------------------------------------------------------------------------
쿠키를 이용해서 북마크 페이지를 만드는 소스
----------------------------------------------------------------------------------------------------------------------------------
<script language="JavaScript">
<!--
var sepchar = "@"; // unique separator character
var BMtotal = 6; // max number of bookmarks permitted
var ShowCount = 0;
var expDays = 30; // 쿠키 지속 기간
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function ListBookmarks() {
var NumBookmarks = GetCookie('PT_NumBookmarks');
var i;
var Bookmark;
if (NumBookmarks == null) {
NumBookmarks = 0;
}
ShowCount = 0; SwapColour = 0;
for (i=1; i <= NumBookmarks ; i++) {
Bookmark = GetCookie('PT_Bookmark'+i);
if (Bookmark != null) {
PrintBookmark(Bookmark, i);
}
}
}
function DeleteBookmark(Count) {
DeleteCookie('PT_Bookmark'+Count);
window.location = window.location;
}
function PrintBookmark (Bookmark, Count) {
var pairs = Bookmark.split(sepchar);
pairs[0]= unescape(pairs[0]);
pairs[1]= unescape(pairs[1]);
var BMtitle = pairs[0];
var BMaddress = pairs[1];
ShowCount++; // 북마크 보여지는 부분의 소스 - <table>는 폼 구성 부분에.. -_-;;
document.write('<tr>');
document.write('<th width="90%"><a href="'+BMaddress+'"><font color="blue">'+BMtitle+'</font></a></th>');
document.write('<th width="10%"><a href="DeleteBookmark('+Count+')" onmouseover="window.status=''+BMtitle+'을/를 삭제합니다. (Count : '+Count+')'; return true" onmouseout="window.status=''; return true"><font color="blue">Delete</font></a></th>');
document.write('</tr>');
}
function AddBookmark(BMtitle, BMaddress) {
var NumBookmarks = GetCookie('PT_NumBookmarks');
var i;
var ToDoItem;
var Bookmark;
var OldestBookmark = 0;
var CountBookmarks = 0;
if (NumBookmarks == null) {
NumBookmarks = 0;
}
for (i=1; i <= NumBookmarks ; i++) {
Bookmark = GetCookie('PT_Bookmark'+i);
if (Bookmark != null) {
CountBookmarks++;
if (OldestBookmark == 0) {
OldestBookmark = i;
}
}
if (Bookmark == BMtitle+sepchar+BMaddress) {
alert(''+BMtitle+'이/가 북마크 되었습니다.'); // 북마크 되었다는 메세지
history.go(0); // 페이지 새로고침 - 북마크시 페이지 새로고침해야 나옴..
return; }
}
if (CountBookmarks > BMtotal) {
DeleteBookmark(OldestBookmark);
}
NumBookmarks++;
SetCookie('PT_Bookmark'+NumBookmarks, BMtitle+sepchar+BMaddress, exp);
SetCookie('PT_NumBookmarks',NumBookmarks, exp);
alert(''+BMtitle+'이/가 북마크 되었습니다.'); // 북마크 되었다는 메세지
history.go(0); // 페이지 새로고침 - 북마크시 페이지 새로고침해야 나옴..
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
function addurl() { // 폼의 값을 받는부분..
AddBookmark(''+document.cookie_bookmark.addurl_title.value+'','http://'+document.cookie_bookmark.addurl_url.value+'');
}
//-->
</script>
<!--
폼 구성 부분
아래 북마크 소스 출려하는 자스의 경우 꼭
<table>을 붙여줘야함..
//-->
<form name="cookie_bookmark" method="post">
<table border="0" width="300" cellspacing="0" cellpadding="2" style="border:1 solid #000000;">
<tr>
<th colspan="3" width="300">쿠키 북마크</th>
<tr>
<tr>
<th width="100">북마크 타이틀</th>
<td colspan="2" align="center" width="200"><input type="text" name="addurl_title" tabindex="1" style="width:100%;"></td>
</tr>
<tr>
<th width="100">북마크 경로</th>
<th width="45"><input type="text" value="http://"; style="width:45px;" tabindex="4"readonly></th>
<td align="center" width="155"><input type="text" name="addurl_url" tabindex="2" style="width:100%;"></td>
</tr>
<tr>
<td colspan="3" align="center" width="300"><input type="button" value="click" onclick="addurl();" tabindex="3" style="width:50%;"></td>
</tr>
<tr>
<td colspan="3" width="300"><Br>
<script language="JavaScript">
<!--
document.write('<table border="0" width="100%" cellspacing="0" cellpadding="2">');
ListBookmarks(); // 북마크를 출력하는 소스
document.write('</table>');
//-->
</script>
</td>
</tr>
</table>
</form>
----------------------------------------------------------------------------------------------------------------------------------
몇번째 방문했는지 알려주는 스크립트
----------------------------------------------------------------------------------------------------------------------------------
<head>
<script language="JavaScript">
<!--
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0)
break;
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (2 < argc) ? argv[2] : null;
var path = (3 < argc) ? argv[3] : null;
var domain = (4 < argc) ? argv[4] : null;
var secure = (5 < argc) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DisplayInfo() {
var expdate = new Date();
var visit;
// Set expiration date to a year from now.
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
if(!(visit = GetCookie("visit")))
visit = 0;
visit++;
SetCookie("visit", visit, expdate, "/", null, false);
var message;
if(visit == 1)
message="감사합니다. Happy에 처음 오신분이군요.";
if(visit== 2)
message="다시 방문해 주셔서 감사합니다.";
if(visit == 3)
message="또 오셨군요. 감사합니다.";
if(visit == 4)
message="기쁩니다, 다시 뵙게 되어서.";
if(visit == 5)
message="요즘 어떻게 지내셨어요 ?";
if(visit == 6)
message="오늘은 자료실을 둘러 보시죠...";
if(visit == 7)
message="이제는 자주 들리시네요...";
if(visit == 8)
message="자주 뵙게되서 기쁘군요 !";
if(visit == 9)
message="오늘은 날씨가 어떤가요 ?";
if(visit >= 10)
message="언제 커피 한잔 하실래요!";
alert("n"+"어서오세요.nn"
+"이번이 "+visit+ "번째 방문입니다." + "nn"
+message);
}
function ResetCounts() {
var expdate = new Date();
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
visit = 0;
SetCookie("visit", visit, expdate , "/", null, false);
}
// -->
</script>
</head>
<body bgcolor="#f5f5f5"
text="#009999"
link="#0066cc"
vlink="#0066cc"
alink="#0099ff"
onLoad="DisplayInfo()">
<p align=CENTER>
<font face="굴림">
방문자에게 다른 메세지 보여주기
</font>
<p align="center">
<font face="굴림" size="2">
새로고침 을 해보세요<br>
그럼 인사말이 바뀔거예요
</font>
</body><input type=button name=simabuttonviewsource value="View Source" onClick='window.location="view-source:"+window.location.href'>
