본문 바로가기
정보기술의 샘터........о♡/접근성과 사용성

[자바스크립트]유용 소스 37가지

신망애(信望愛) 2008. 9. 8. 23:22

[자바스크립트]유용 소스 37가지

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-ｅquiv="Page-Enter" content="BlendTrans (Duration=3)">
<META http-ｅquiv="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="javascripｔ: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-ｅquiv="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-ｅquiv='imagetoolbar' content='no'>

출처 : Tong - BlueSky_08님의 JavaScript통

'정보기술의 샘터........о♡ > 접근성과 사용성' 카테고리의 다른 글

장애인 차별금지법 시행  (0) 2008.09.26
웹사이트기획을 위한 분석  (0) 2008.09.22
테이블관련 자바소스  (0) 2008.09.08
“청와대 웹사이트도 소통 부재”  (0) 2008.06.09
장애인사업, 대기업이 나설 때다기자수첩  (0) 2008.05.29

'정보기술의 샘터........о♡/접근성과 사용성' Related Articles

티스토리툴바