♬
..
API (4)
※레이어의 스타일 속성 사용법
2008. 5. 28. 14:46,  DEV/html/css/js/img
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

※레이어의 스타일 속성 사용법
   –레이어를 자바스크립트와 함께 사용할 때는 레이어의 스타일 속성을 이용
   –스타일 속성은 <div style=“ ”>에서 style 속성에 지정한 스타일 속성 값을 그대로 사용
       document.all[id명].style.스타일 속성

     ①레이어 보이거나 감추게 하기
         document.all[id명].style.visibility=visible/hidden
     ①레이어 이동하기
        document.all[id명].style.left=값
        document.all[id명].style.top=값
        document.all[id명].style.left=event.clientX
        document.all[id명].style.top=event.clientY
     
      •애니메이션 효과를 줄 때 사용
      •레이어의 좌표 값을 변경하여 레이어가 담고 있는 문자, 그림 등을 움직이게 할 수 있음

'DEV > html/css/js/img' 카테고리의 다른 글

ajax 관련 사이트 모음  (0) 2008.10.12
Layers 객체  (0) 2008.05.28
Layer 객체의 특성  (0) 2008.05.28
  Comments,     Trackbacks
Layers 객체
2008. 5. 28. 14:33,  DEV/html/css/js/img
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
레이어란 문서에 떠 있는 새로운 창입니다.
레이어를 문서에 삽입하려면 <div> 태그를 사용합니다.
자바스크립트와 스타일을 함께 사용하면 애니메이션 효과를 만들 수도 있습니다.

레이어의 스타일 속성 사용법
레이어를 자바스크립트와 함께 사용할 떄는 레이어의 스타일 속성을 이용합니다.
레이어의 스타일 속성은 <div style=""> 에서 style 속성에 지정한 스타일 값을 그대로 사용합니다.
view plaincopy to clipboardprint?
  1. document.all[id명].style.스타일 속성  

아래는 실제 사용되는 예입니다.
view plaincopy to clipboardprint?
  1. <div id=coolsoft>  
  2. <a href=# onMouseOver="note1.style.visibility='visible'" onMouseOut="note1.style.visibility='hidden'">쿨소프트</a><br><br>  
  3. </div>  
  4. <div id=note1>  
  5. 쿨소프트<br>  
  6. HTML, CSS, 자바 스크립트, JSP, XML, 플래시 등 웹프로그래밍 강좌 및 자료 수록.  
  7. </div>  

쿨소프트를 누르게 되면 아래에 설명이 나오게 됩니다..

'DEV > html/css/js/img' 카테고리의 다른 글

※레이어의 스타일 속성 사용법  (0) 2008.05.28
Layer 객체의 특성  (0) 2008.05.28
[javascript] javacript 객체 모델  (0) 2008.05.28
  Comments,     Trackbacks
Layer 객체의 특성
2008. 5. 28. 14:27,  DEV/html/css/js/img
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
Layer 객체의 특성

<name>

 name특성은 <LAYER> 택에서 ID속성을 지정해 놓은 레이어의 이름을 가리키게 된
다. 이 특성은 자바스크립트에서 값을 참조만 할 수 있지 수정할 수는 없다.

<let / top>

left와 top은 레이어의 좌측 상단 위치(픽셀 단위)를 가리키는 특성이다. 특히 이 특성
값은 자신히 현재 속해 있는 레이어나 문서를 기준으로 계산된다는 점에 주의해야
한다.
 
이 특성은 자바스크립트에서 참조 뿐만 아니라 수정도 할 수 있기 때문에 레이어의
위치를 동적으로 바꾸는데 사용할 수 있다.
 

 

<예>

<HTML>
    <HEAD>
 <TITLE> 레이어 예제 </TITLE>
       <SCRIPT LANGUAGE="JavaScript">
        <!--
            function leftLayer() {
                // layer1을 지정하는 방법을 보자.
                // document 객체 밑에 있는 layers라는 객체 배열에는 현재 문서 안에
                // 포함되어 있는 모든 레이어들의 객체가 들어가 있다. 이중에 layer1
                // 레이어 객체를 가리키기 위해 참조 배열 방식을 사용하여야 한다.
                // 또는 이 레이어가 문서에 첫번째로 나타나는 레이어 객체이기 때문에
                // window.document.layers[0]도 동일한 객체를 가리키는 것이 된다.
                var val = window.document.layers['layer1'].left;
                window.document.layers['layer1'].left = val - 5;
            }
            function upLayer() {
                var val = window.document.layers['layer1'].top;
                window.document.layers['layer1'].top = val - 5;

            }
            function downLayer() {
                var val = window.document.layers['layer1'].top;
                window.document.layers['layer1'].top = val + 5;
            }
            function rightLayer() {
                var val = window.document.layers['layer1'].left;
                window.document.layers['layer1'].left = val + 5;
            }
        // 자바스크립트 끝 -->
        </SCRIPT>
    </HEAD>
    <BODY>
        <CENTER> <H1>레이어 이동</H1>
        <FORM NAME="myform">
            <INPUT TYPE="button" VALUE="왼쪽으로" onClick="leftLayer()">
            <INPUT TYPE="button" VALUE="  위로  " onClick="upLayer()">
            <INPUT TYPE="button" VALUE=" 아래로 " onClick="downLayer()">
            <INPUT TYPE="button" VALUE="오른쪽으로" onClick="rightLa

yer()">
        </FORM>
        </CENTER>
        <LAYER ID=layer1 TOP=100 LEFT=250 WIDTH=250 HEIGHT=50
                  BGCOLOR="WHITE">
         <H2> 넷스케이프사에서는 커뮤니케이터 4.0부터 HTML 문서 상에서
         특정 영역을 지정하여 내용을 보여줄 수 있는 레이어(Layer)라는 기능을
         제공하기 시작하였다. </H2>
        </LAYER>
    </BODY>
</HTML>

결과보기

<width / height>

width와 height는 각각 레이어의 너비와 높이에 대한 정보를 가지고 있는 특성이다.
이 특성은 자바스크립트에 의해 참조할 수도 있고 수정할 수도 있다.

<pageX / pageY>

 pagex와 cageY는 앞에 나온 1911와 top특성처럼 레이어의 좌측 상단 위치(픽셀 단위)
를 가리키는 특성이다. 다만 다른점이라면 pagex와 cageY가 항상 전체 페이지를 기
준으로 한 위치 정보라면, left와 top은 현재 포함되어 있는 레이어나 문서를 기준으로
한다는 것이다. 이 특성 역시 자바스크립트에서 참조 뿐만 아니라 수정도 할 수 있다

<clip.top / clip.left / clip.right / clip.bottom>

이 특성들은 클리핑 영역의 크기에 대한 정보를 가지고 있다. 여기서 클리핑 영역이
라는 것은 전체 레이어 중에서 실제로 화면에 보여줄 영역을 의미한다. 이 특성들은
자바스크립트에서 참조 뿐만 아니라 수정도 할 수 있다.

<예>

<HTML>
    <HEAD>
 <TITLE> 레이어 예제 </TITLE>
       <SCRIPT LANGUAGE="JavaScript">
        <!--
           function zoomOut() {
            window.document.layers[0].clip.left = window.document.layers[0].clip.left-2;
            window.document.layers[0].clip.top = window.document.layers[0].clip.top-2;
            window.document.layers[0].clip.right = window.document.layers[0].clip.right+2;
            window.document.layers[0].clip.bottom = window.document.layers[0].clip.bottom+2;
            }
           function zoomIn() {
            window.document.layers[0].clip.left = window.document.layers[0].clip.left+2;
            window.document.layers[0].clip.top = window.document.layers[0].clip.top+2;
            window.document.layers[0].clip.right = window.document.layers[0].clip.right-2;
            window.document.layers[0].clip.bottom = window.document.layers[0].clip.bottom-2;
           }
        // 자바스크립트 끝 -->
        </SCRIPT>
    </HEAD>
    <BODY>
        <CENTER>
        <H1>레이어 이동</H1>
        <FORM NAME="myform">
            <INPUT TYPE="button" VALUE="확대" onClick="zoomOut()">
            <INPUT TYPE="button" VALUE="축소" onClick="zoomIn()">
        </FORM>
        </CENTER>
        <LAYER ID=layer1 TOP=100 LEFT=300 WIDTH=250 HEIGHT=50
                 CLIP=50,50,100,100 BGCOLOR="WHITE">
         <H2> 넷스케이프사에서는 커뮤니케이터 4.0부터 HTML 문서 상에서
         특정 영역을 지정하여 내용을 보여줄 수 있는 레이어(Layer)라는 기능을
         제공하기 시작하였다. </H2>
        </LAYER>
    </BODY>
</HTML>

결과보기

<bgColor / background>


bgcolor는 레이어의 배경색을 가리키는 특성이고, background는 레이어의 배경 이미지
의 URL주소를 가리키는 특성이다. bgcolor에는 직접 색상 이름이 지정될 수도 있고,
RGB 값이 지정될 수도 있다. 또한 배경색을 투명하게 만들고 싶은 경우에는 null을
지정하게 되는데, 이 값이 bgcolor의 디폴트값이다.
 
   //파란색 배경 이데지
   layer.bgcolor = "BLUE":
     or
   layer.bgcolor = "#0000FF":
 
// 배경을 투명하게
layer.bgcolor = null;

<zindex / siblingAbove / siblingBelow / above / below>


zindex는 레이어들 사이의 순서를 지정하는 특성으로, 이 값이 높은 레이어일수록 값
이 낮은 레이어 위로 올라가게 된다. 그리고 siblin턴.hove와 above는 모두 현재 정의
되는 레이어 위에 들어갈 레이어를 지정하게 되고, siblingBelow와 below는 현재 정의
되는 레이어 밑에 들어갈 레이어를 지정하게 된다. 단, sibling이 앞에 붙은 특성의 경
우에는 동일한 상위 레이어 안에 들어간 레이어들 중에서 하나를 지정해야 한다.

여기에서 한 가지 주의해야 할 점은 zlndex의 경우에는 자바스크립트에서 값을 참조
할 뿐만 아니라 수정할 수도 있지만, 나머지 siblin앓,hove, siblingBelow, above, below
특성은 수정할 수는 없고 참조만 할 수 있다는 것이다.
 

<visibility>

 visibility특성은 현재 래이어를 보여줄 것인지 감출 것인지를 지정하기 위한 것이다.
이 특성에는 "show", "hi(k", "irlherit" 중 한 값이 설정될 수 있다. 여기에서 show는 레
이어를 보여준다는 것이구 hide는 레이어를 감춘다는 것이며, inherit는 현 레이어를
포함하고 있는 상위 레이어의 속성값을 상속받는다는 것을 의미한다.

<parentLayer>

 pcrenaayer는 레이어가 현재 포함되어 있는 상위 레이어의 이름을 가리키게 되는데,
만약 레이어 안에 포함되어 있지 않다면, 레이어가 포함되어 있는 윈도우 객체를 가
리키게 된다. 참고로 이 특성값은 참조만 할 수 있고 수정할 수는 없다.
 

<src>
src는 레이어 안에 내용으로 들어갈 HTML파일의 URL주소를 지정하는데 사용하는
특성이다. 이 특성은 자바스크립트에서 수정할 수 있기 때문에 포맷을 그대로 유지하
면서 내용이 계속해서 바뀌는 웹 사이트에 유용하게 사용될 수 있을 것이다.
 

 

<예>

<HTML>
    <HEAD>
 <TITLE> 레이어 예제 </TITLE>
       <SCRIPT LANGUAGE="JavaScript">
        <!--
           function showLayer() {
              window.document.layers[0].visibility = "show";
           }
           function hideLayer() {
              window.document.layers[0].visibility = "hide";
           }
           function docu1() {
              window.document.layers[0].src = "docu1.htm";
           }
           function docu2() {
              window.document.layers[0].src = "docu2.htm";
           }
           function docu3() {
              window.document.layers[0].src = "docu3.htm";
           }
        // 자바스크립트 끝 -->
        </SCRIPT>
    </HEAD>
    <BODY>
        <CENTER>
        <H1>레이어 이동</H1>
        <FORM NAME="myform">
            <INPUT TYPE="button" VALUE="보이기" onClick="showLayer()">
            <INPUT TYPE="button" VALUE="감추기" onClick="hideLayer()">
            <INPUT TYPE="button" VALUE="문서 1" onClick="docu1()">
            <INPUT TYPE="button" VALUE="문서 2" onClick="docu2()">
            <INPUT TYPE="button" VALUE="문서 3" onClick="docu3()">
        </FORM>
        </CENTER>
        <LAYER ID=layer1 TOP=100 LEFT=280 WIDTH=250 HEIGHT=200
                 SRC="docu1.htm" BGCOLOR="WHITE">
        </LAYER>
    </BODY>
</HTML>

<예>

<HTML>
   <BODY>
   <H3>넷스케이프사에서는 커뮤니케이터 4.0부터 HTML 문서 상에서 특정 영역을
   지정하여 내용을 보여줄 수 있는 레이어(Layer)라는 기능을 제공하기 시작하였다.</H3>
   </BODY>
</HTML>

<예>

<HTML>
   <BODY>
   <H3>이 레이어는 여러개가 서로 겹쳐서 나타날 수 있으며, 자바스크립트를 이용하면
   위치도 자유롭게 바꿀 수가 있다. </H3>
   </BODY>
</HTML>

<예>

<HTML>
   <BODY>
   <H3>또한 자바스크립트를 이용하여 레이어를 감출 수도 있으며, 겹쳐진 레이어들이
   투명하게 나타나도록 만들 수도 있다. </H3>
   </BODY>
</HTML>

결과보기

'DEV > html/css/js/img' 카테고리의 다른 글

Layers 객체  (0) 2008.05.28
[javascript] javacript 객체 모델  (0) 2008.05.28
css관련 참고 사이트  (0) 2008.03.11
  Comments,     Trackbacks
[javascript] javacript 객체 모델
2008. 5. 28. 11:25,  DEV/html/css/js/img
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
사용자 삽입 이미지

'DEV > html/css/js/img' 카테고리의 다른 글

Layers 객체  (0) 2008.05.28
Layer 객체의 특성  (0) 2008.05.28
css관련 참고 사이트  (0) 2008.03.11
  Comments,     Trackbacks
카테고리
최근 작성 글
최근 작성 댓글
최근 작성 트랙백
블로그 이미지
공지사항
링크
글 보관함
캘린더
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
태그
strutsjavascript웹표준SQLweb.xmlAPIMultipartResolvervalidator웹기획값 검증보안권고단축키서블릿TipsJavaselenium이벤트jsp말줄임표글자수이클립스IT용어Oracle자바제목길이리눅스오라클spring용어자바스크립트
TODAY TOTAL
boa111's Blog : Powered by and Designed by Lawlite

티스토리툴바