|
1. 상황칸에 타자
2. 자동으로 타자
3. 상황칸에 고정 제목
3-1. iframe
4. 미디어재생
5. mouse event 셀 위에 올라갈때
6. 화면slow모션
7. 마우스over
8. 줄맞추기 / 폰트 break
9. 폰트 설정
11. box border
12. 스크롤바 변경 body,textarea
13. 폰트효과
14. 소스비공개
15. 드래그 불능
16. 백그라운드고정 img 16-1. 백그라운드 이미지 스타일
17. 입력폼에 주석입력
18. 윈도우 리프래쉬로 새로운창으로 변경
19. 윈도우 테두리확장
21. javascript:닫기
22. javascript:뒤로
23. javascript:즐겨찾기
24. 부모와 자식창 링크
25. 테이블 border 와 background 속성
26. Blink
27. 이미지테두리 over out
28. 셀 여백주기
29. 플래시 투명
30. 이미지 테두리 색상 30-1. 이미지 감추기
31. type=button border
32. 셀렉트박스 window.open 33. input, textarea 배경색 투명 34. input button에 url 걸기 35. 마우스 onFocus / cursor 36. 이미지맵 37. xp에서 이미지도구 없애기
--------------- 1.상황칸에 타자 ----------
<script language="javascript">
<!--
var i=1;
function ani(){
i++
if(i==5) {i=1;}
if(i==1) {window.status = "홈";}
if(i==2) {window.status = "홈페";}
if(i==3) {window.status = "홈페이";}
if(i==4) {window.status = "홈페이지";}
setTimeout("ani()",200);
}
//-->
</script> <body onload="ani()">
------------- 2.자동으로 타자 ------------
<script language="javascript">
<!-- var msg = new Array()
msg[0] = "홈페이지 만들기"
msg[1] = "홈페이지를 만드는데 도움이 되는"
msg[2] = "자료를 제공하고 있습니다." var count = 0;
var offset = 0; function show(){
var text = msg[count];
if(offset < text.length){
var message = text.substring(0,offset+1);
window.status = message;
offset++;
}else{
offset = 0;
count++;
if(count == msg.length){
count=0;
}
}
setTimeout("show()",100);
} //-->
</script> <body onload="show()">
------------------- 3.상황칸에 고정 제목 -------
<script language="JavaScript">
statuss(); function statuss()
{
window.status = "마스터 포토샵(Master Photoshop)";
setTimeout("statuss()", 1);
} </script>
-----------------------3-1iframe--------------
<iframe frameborder="0" height="600" leftmargin="0" topmargin="0"
marginwidth="0" scrolling="no" src="http://사이트주소입력"
width="550"></iframe>
------------- 4. rm.재생 ----------
<embed src="파일명" width="150" height="50" border="0"
type="audio/x-pn-realaudio-plugin"
autostart="true">
------------- wav.mp3.mpeg 재생 -----------
<embed src="파일명" width="246" height="239"
border="0" autoplay="yes" loop="yes">
--------------- 5.mouse event 셀 위에 올라갈때 -----
첫번째(셀에 각자의 칼라부여)
<td width="50" bgcolor="#66FFFF"
onmouseover="this.style.background='#ACB4FF'"
onmouseout="this.style.background='#66FFFF'">aaaa</td>
---------------- 6.화면slow모션 ------------------
<head>
<META http-equiv="Page-Enter" content="BlendTrans (Duration=3)">
<META http-equiv="Page-Exit" content="BlendTrans (Duration=3)">
</head> -------- 7.마우스 over------------
<style>
<!--
A:link {text-decoration:none; color:red;}
A:visited {text-decoration:none; color:red}
A:active {text-decoration:none; color:red}
A:hover {text-decoration:none; color:red; font-weight:bold; letter-spacing:-1;}
-->
</style> -- 추가옵션 --
A:hover { BACKGROUND-COLOR: yellow} ---------- 8.줄 맞추기 / 폰트break ----------------------- <style="text-align:justify"> <style="word-break:break-all;"> (td 안에 단어형태 줄바꿈을 무시하고 폰트를 깨고 줄바꿈을 한다)
---------- 9.폰트px 조절 ---------------------
<font style="font-size:11px;">정교한 폰트픽셀</font>
---------- 10.바디 폰트스타일 스타일 ---------------
<body style="font-family:돋움; font-size:12px;">
---------- 11.box border 스타일 ---------------
<input type="text" style="border:1 gray solid"> ---------- 12.스크롤바 변경 ----------------- <style type="text/css"> BODY
{scrollbar-3dlight-color:#dddddd;
scrollbar-highlight-color:#ffffff;
scrollbar-arrow-color:#999999;
scrollbar-face-color:#ffffff;
scrollbar-track-color:#f2f2f2;
scrollbar-shadow-color:#ffffff;
scrollbar-darkshadow-color:#999999;}
</style> ------------ 12-1 textarea 변경 -------------------
<style> TEXTAREA {
font-family:;
font-size: 9pt; overflow:auto
color: #666666;
border:1 solid #cccccc;
scrollbar-3dlight-color:#dddddd;
scrollbar-highlight-color:#ffffff;
scrollbar-arrow-color:#999999;
scrollbar-face-color:#ffffff;
scrollbar-track-color:#f2f2f2;
scrollbar-shadow-color:#ffffff;
scrollbar-darkshadow-color:#999999;
}
---------- 13.멋진 폰트효과 -----------------
<font style="height:41; width:200; font-size:23; filter:shadow(color=blue)"><b><font color="aqua">푸하하</b></font>
--------------- 14.소스비공개 ------------------------------
<script language="JavaScript">
function click() {
if ((event.button==2) || (event.button==3)) {
alert('소스비공개입니다');
}
}
document.onmousedown=click
</script> --------------- 15.드래그불능 -----------------
<body onload="return false;" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
----------------- 16.백그라운드 고정--------------------
bgproperties="fixed"
------------------ 16-1 백그라운드 이미지 스타일 ----------------- style="BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(/images/bg_sub04.jpg); BACKGROUND-REPEAT: repeat-x;"
--------------------- 17.입력폼에 주석입력 ---------------------
<input type=text name=write size=15 value="내용을 입력하세요" onFocus="javascript:value=''">
-------------------- 17-1 입력폼에 이미지삽입 & 제거 ----------------- <script type="text/javascript">
function idclear() {
document.login.id.style.backgroundImage = '';
}
function pwclear() {
document.login.pw.style.backgroundImage = '';
}
</script> <form name="login">
<input type="text" name="id" value="" onFocus="idclear();" style="background:url(input_id.gif);" >
<input type="password" name="pw" value="" onFocus="pwclear();" style="background:url(input_pw.gif);" >
</form>
--------------18.윈도우 리프래쉬로 새로운창으로 변경-----------------
<META HTTP-EQUIV="Refresh" CONTENT="0; URL=http://kr.yahoo.com"> --------------- 19.윈도우 테두리확장 -----------------------
<script language="JavaScript">
function ml_open(){
pbml_win = window.open("http://yahoo.co.kr", "insideu", s='top=0,left=0,width='+
(screen.availWidth-10)+',height='+(screen.availHeight-70)+',toolbar=yes,status=0,resizable=yes');
return;
}
</script>
<a href="javascript:ml_open()" target="_self">들어가기</a>
-------------- 20.하나의 윈도우가 뜨면서
또하나의 새로운 윈도우띄우는 방법..! ---------------
proceed =>
1.하나의 윈도우가 뜨는곳에 명령어를 삽입한다 이것 역시 헤드[head]부분에 삽입한다
<SCRIPT LANGUAGE = "Javascript"> <!-- var farwindow = null;
function remoteWindow() { farwindow =
window.open('','LinksRemote','width=240,height=150,toolbar=yes,scrollbars=0,resizable=0');
if (farwindow != null) {if (farwindow.opener == null) {
farwindow.opener = self;}farwindow.location.href = '또하나의 새로운 윈도우를 띄우는 url이나 html파일 삽입'; } }//-->
</SCRIPT>
설명---
status=하단설명 scrollbars=스크롤 resizabale=사각크기조절 2.그다음 바디[body]안에 이 명령어를 삽입한다
<body onLoad="remoteWindow()"> 또하나.. 이거만 넣어도 되네..!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<script language="javascript">
window.open('http://yahoo.co.kr','',
'toolbar=no, scrollbars=no, directories=no, resizable=no, width=400, height=550' );
</script>
-------------------------------------------------------------------------------- ---------------새로운 윈도우 자동으로 띄우기---------
*head에 넣을 문서
<SCRIPT LANGUAGE="JavaScript">
function notice() { window.open('열 문서.htm','','toolbar=no, menubar=no, location=no,height=500,width=500'); }
</SCRIPT> *body에 넣을 문서
페이지에 나갈 때 새창 띄우기 --> <BODY onLoad="notice()">
페이지에 들어오면 새창 띄울 때 --> <BODY onUnload="notice()">
-----------------------------------------------------------------------------------
OnLoad="na_open_window('win', 'caution.htm', 0, 0, 368, 248, 0, 0, 0, 0, 0);" -----------------------------------------------------------------------------------
--------- 21.새로운 윈도우를 닫는버튼만들기..-----------------
<a href="javascript:window.close()">닫기</a>
-------- 22.자바스크립으로 뒤로가기 버튼 -----------------
<a href="javascript:history.back()">뒤로</a> -------- 23.자바스크립트 즐겨찾기 추가하기 ----------------
하이퍼링크에 다음문장 삽입
<a href="javascript:window.external.AddFavorite('http://www.yahoo.co.kr/','야후 즐겨찾기 추가')">즐겨찾기추가</a> --------------------------.---------------------------------- <bgsound src="Turkish.mid" loop="infinite">
백그라운드사운드
-----------------24.부모창과 자식창 링크 연결--------------------
<head>
<script>
function opener_loc()
{
opener.location='/event.asp'
self.close();
}
</script>
</head>
<a href="javascript:;opener_loc()"></a>
------------------- 25.테이블 보더 얇고 이쁘게 ------------------------------
<table bordercolordark="white" bordercolorlight="black" border=1>
------------------- 25-1. 테이블 background 스타일 ------------------------ <table style="BACKGROUND-POSITION:left top; BACKGROUND-ATTACHMENT:fixed; BACKGROUND-IMAGE:url(/images/bg_sub1.jpg); BACKGROUND-REPEAT:repeat-x;"> ---------------------- 26. Blink --------------------------------
<script>
function doBlink() {
var blink = document.all.tags("BLINK")
for (var i=0; i < blink.length; i++)
blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : ""
}
function startBlink() {
if (document.all)
setInterval("doBlink()",300)
}
window.onload = startBlink;
</script>
<blink>반짝반짝거립니다</blink>
================= 27 이미지 테두리 over, out 색상 ====================
<script>
function over(img_id) {
img_id.style.borderColor = "#99CCCC";
}
function out(img_id,c) {
img_id.style.borderColor = String(c) ;
}
</script> <a href=""><IMG SRC="http://static.naver.com/common/lg/naver03.gif" onMouseOver="over(this)" onMouseOut="out(this,'#666666')" style="border: solid 1px #666666"> ============== 28. 셀 여백주기 ========================
<table> <td style="padding-left:30px"> </table left 옵션 top, right, bottom =================== 29. 플래시 투명 ===================== html tag > <param name=wmode value=transparent> ============= 30. 이미지 테두리 색상 ===================
<img src="" border=5 style="border-color:red"> 30-1. 이미지 감추가 <img src="" style="visibility:hidden"> ===============31 input type=button border ====================
<INPUT type=button value=" 확 인 "
ONFOCUS="this.blur()"
style="cursor:hand;
font-family:verdana;font-size:11px;color:black;
background-color:#EFEFEF;
border:1 solid #999999;
height:20; padding:2px;"
onMouseOver="this.style.backgroundColor='#FFFFFF'"
onMouseOut="this.style.backgroundColor='#EFEFEF'"> ================== 32. 셀렉트 박스. window.open ========================
? <select name="select3" onChange="window.open(this.options[this.selectedIndex].value,'_blank','')"
style="width:200px; font-size:9pt; margin-top:1px; margin-right:0; margin-bottom:1; margin-left:0;
padding:0; border-width:1px;">
<option value="about:blank">검색사이트::::::</option>
<option value="http://www.naver.com/">네이버</option>
<option value="http://daum.net">다음</option> ================== 33 input, textarea 배경 투명 ========================== <style> INPUT, TEXTAREA {background-color:transparent} </style> ================== 34. input button 에 url 걸기==================== <input type=button value="url 전송" onClick="window.location.href='http://www.naver.com'"> =================35. 마우스 onFocus / cursor ==================== <img src="" width=200 height=80 style="cursor:hand;"> <a href="" onFocus="this.blur();"> =================== 36. 이미지맵 ========================== <img src="logo.gif" width=300 height=50 border="0" usemap="#Map01"> <map name="Map01">
<area shape="rect" coords="100,10,200,30" href="http://naver.com">
</map>
===================== 37. 이미지도구 없애기 ====================== <META http-equiv='imagetoolbar' content='no'>
|
