65. 그림 파일 이용하기

65.1. 눈이 땅으로 떨어지는 효과

겨울이 되면 많이 등장하는 효과 중의 하나가 웹브라우저 화면에 눈이 떨어지는 효과입니다. 특히 배경으로 눈이 있는 그림을 사용할 경우 아주 효과적입니다. 눈이 떨어지는 효과를 구현하기 위해서는 프로그램만으로 안됩니다. 눈 그림이 있어야 합니다. 눈으로 사용할 그림은 당연히 gif 파일이어야 합니다. 그래야만 투명색을 이용하여 눈이 오는 것 같은 효과를 낼 수 있습니다. 눈 그림을 좀더 사실적으로 그리고, 여러 종류의 눈 그림을 섞어서 사용하면 더욱 실감나게 눈 내리는 효과를 연출할 수 있습니다.

ex2_01.html은 간단한 눈그림 하나만을 이용하여 눈이 내리는 것 같은 효과를 비슷하게 구현했습니다. 눈이 바람에 흔들거리며 내려오는 효과를 주기 위하여 sin 함수를 사용했습니다.

** 사진: 눈 그림의 모습이나 눈송이의 수에 따라서 눈이 내리는 형태에 변화를 줄 수 있습니다. vpcs의 수치를 크게 하면 눈송이 수가 많아집니다.

** 살펴볼 부분
1. vpcs는 화면에 동시에 표시할 그림의 수를 설정합니다. 즉 눈송이 수를 지정합니다. 숫자가 클수록 많은 눈송이가 화면에 표시됩니다.
2. document.all['grim'+i].style.pixelTop=ypos[i]-40; 명령은 눈송이가 표시되는 y축 좌표를 설정하는 명령입니다. 여기에서 -40을 한 이유는 그림 크기보다 조금 더 크게 빼주어야 하기 때문입니다. 만약 그림 크기보다 더 큰 수치를 빼주지 않을 경우 눈송이가 화면 밑에 도달할 때 브라우저의 상하 스크롤 막대가 생겼다 없어졌다 하는 행동을 반복하기 때문에 보기에 좋지 않습니다. 마찬가지 이유로 다음 줄에서 x축 좌표 설정에서도 -40을 해주었습니다. 만약 눈송이 그림 파일의 크기가 10*10 픽셀이라면 -10 이상의 수치만 빼주면 됩니다.
3. setTimeout('fallimg()',1); 은 눈이 떨어지는 속도를 결정합니다. 1이 가장 빠르고, 수치가 클수록 느려집니다. 1을 주어도 빠르지 않은데 더 빠르게 하고 싶다면 x, y 좌표를 계산하는 명령에서 간격을 더 많이 주도록 고쳐주어야 합니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex2_01.html - 눈이 땅으로 떨어지는 효과 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
  눈이 땅으로 떨어지는 효과<BR>
  <SCRIPT language="JavaScript">  </SCRIPT>
</BODY>
</HTML>

65.2. 꽃이나 낙엽이 땅으로 떨어지는 효과

ex2_01.html을 응용하면 눈 외에도 다양한 그림이 떨어지는 효과를 줄 수 있습니다. 그림 파일의 이름을 바꾸는 것만으로도 꽃이 내리는 효과나 낙엽이 떨어지는 효과 등을 줄 수 있습니다. 또는 사람의 얼굴이나 각종 사탕 등의 선물 꾸러미가 떨어지는 효과로 응용할 수도 있습니다. 단 떨어지는 사물의 특징에 맞게 속도나 움직임의 크기를 조절할 필요가 있습니다.

** 사진: 꽃 그림으로 바꾸고 움직임에 관련된 계산식에 변화를 주면 꽃이 바람에 크게 날리는 효과를 줄 수 있습니다.

** 살펴볼 부분
1. vpcs는 화면에 동시에 표시할 그림의 수를 설정합니다. 즉 꽃송이 수를 지정합니다. 숫자가 클수록 많은 꽃송이가 화면에 표시됩니다.
2. document.all['grim'+i].style.pixelTop=ypos[i]-40; 명령은 꽃송이가 표시되는 y축 좌표를 설정하는 명령입니다. 여기에서 -40을 한 이유는 그림 크기보다 조금 더 크게 빼주어야 하기 때문입니다. 만약 그림 크기보다 더 큰 수치를 빼주지 않을 경우 꽃송이가 화면 밑에 도달할 때 브라우저의 상하 스크롤 막대가 생겼다 없어졌다 하는 행동을 반복하기 때문에 보기에 좋지 않습니다. 마찬가지 이유로 다음 줄에서 x축 좌표 설정에서도 -40을 해주었습니다. 만약 꽃송이 그림 파일의 크기가 10*10 픽셀이라면 -10 이상의 수치만 빼주면 됩니다.
3. setTimeout('fallimg()',1); 은 눈이 떨어지는 속도를 결정합니다. 1이 가장 빠르고, 수치가 클수록 느려집니다. 1을 주어도 빠르지 않은데 더 빠르게 하고 싶다면 x, y 좌표를 계산하는 명령에서 간격을 더 많이 주도록 고쳐주어야 합니다.
4. startx[i]=0.2+Math.random()/5; 명령을 잘 보기 바랍니다. ex2_01.html 에서는 0.02를 곱하고 10으로 나누었는데 이번에는 2를 곱하고 5로 나누었습니다. 곱하는 수가 커지고, 나누는 수가 작아질수록 꽃송이가 좌우로 움직이는 반경이 커지고 속도가 빨라지니다.
5. starty[i]=2.0+Math.random(); 명령도 변화했습니다. ex2_01.html에서는 0.7을 곱했는데 이번에는 2를 곱했습니다. 수치가 클수록 꽃송이가 위에서 아래로 내려오는 속도가 빨라집니다.
6. <IMG src="icon/i0102.gif" border="0"> 명령에서 그림 파일의 이름을 바꾸면 해당 그림 파일이 바람에 날리는 것처럼 내려오는 효과를 볼 수 있습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex2_02.html - 꽃이나 낙엽이 땅으로 떨어지는 효과 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
 꽃이나 낙엽이 땅으로 떨어지는 효과<BR>
  <SCRIPT language="JavaScript">  </SCRIPT>
</BODY>
</HTML>

65.3. 오른쪽 밑에 항상 따라다니는 그림

ex2_03.html은 화면 오른쪽 밑에 항상 따라다니는 그림을 보여줍니다. 이 그림에 필요한 문서를 링크시킬 수 있기 때문에 언제든지 링크된 곳으로 이동할 수 있습니다. 문서의 중간 부분에서도 오른쪽 밑의 그림 아이콘만 누르면 링크된 곳으로 이동할 수 있어 사용자에게 편리함을 제공합니다.

** 사진: 문서 처음 부분은 물론 문서 끝까지 스크롤해도 오른쪽 밑에 있는 그림이 계속 스크롤막대를 따라다니면서 문서 오른쪽 밑에 위치합니다.

** 살펴볼 부분
1. vgwidth와 vgheight 변수는 그림의 가로, 세로 크기를 지정하는 변수입니다. 사용할 그림 파일의 크기와 같거나 그보다 크게 지정하면 됩니다.
2. vgmarginX와 vgmarginY는 그림의 여백을 설정합니다.
3. <BODY> 태그 안에 사용한 <A> 태그에 필요한 링크 내용을 삽입합니다. 본 예제는 <A HREF="http://www.x119.co.kr"> 명령을 이용해 x119.co.kr 사이트를 연결시켰습니다. 그외 사이트맵 문서나 홈페이지로 가는 주소를 적어 사용할 수 있습니다.
4. <IMG> 태그 안에 src 속성 값에 필요한 아이콘의 파일 이름을 적습니다. 본 예제에서는 src="icon/i0093.gif" 명령을 이용했습니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex2_03.html - 오른쪽 밑에 항상 따라다니는 그림 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     function change(form) { 
       if (form.url.selectedIndex != 0) 
       parent.location = form.url.options[form.url.selectedIndex].value 
     }

65.4. 문서 첫 줄로 가기 아이콘 만들기

ex2_03.html을 이용하면 오른쪽 밑에 따라다니는 아이콘을 이용하여 지정된 곳으로 늘 이동할 수 있도록 해줍니다. 그런데 많은 사이트에서 이 기법을 이용하여 문서 처음으로 가기 아이콘을 만들어 사용합니다. 즉 어떤 문서를 볼 때 화면 오른쪽 밑에 따라다니는 아이콘을 누를 경우 현재 보고 있는 문서의 첫 줄로 이동시켜 줍니다. 보통 ‘TOP’이라는 말이 새겨진 아이콘으로, 긴 문서를 읽다가 ‘첫 줄로 가기’ 아이콘을 누르면 문서의 첫 줄로 이동합니다.

문서의 첫 줄로 이동하는 방법은 현재 읽고 있는 문서를 다시 불러오는 것입니다. 따라서 오른쪽 밑에 표시되는 아이콘에 현재 문서를 링크로 연결시키면 아이콘을 누르는 순간 문서 첫 줄로 이동하게 됩니다. ex2_04.html 문서는 문서 첫 부분으로 가기 아이콘을 화면 오른쪽 밑에 계속 따라다니게 하고, 아이콘에는 현재 보고 있는 문서를 링크시킨 예제입니다. 이 예제를 응용하면 문서 첫 줄로 가기 아이콘을 배치시킬 수 있습니다.

** 사진: 문서 보던 중간에 오른쪽 밑의 아이콘을 누르는 순간 문서 첫 줄로 이동합니다.

** 살펴볼 부분
1. vgwidth와 vgheight 변수는 그림의 가로, 세로 크기를 지정하는 변수입니다. 사용할 그림 파일의 크기와 같거나 그보다 크게 지정하면 됩니다.
2. vgmarginX와 vgmarginY는 그림의 여백을 설정합니다.
3. <BODY> 태그 안에 사용한 <A> 태그에 현재 문서 파일 이름을 적으면 아이콘을 누르는 순간 문서 첫 줄로 이동합니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex2_04.html - 문서 첫 줄로 가기 아이콘 만들기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     function change(form) { 
       if (form.url.selectedIndex != 0) 
       parent.location = form.url.options[form.url.selectedIndex].value 
     }

65.5. 메뉴에서 선택한 그림 보여주기

메뉴에서 선택한 그림을 지정된 영역에 보여주는 기법은 홈페이지에서 자주 사용하는 기법입니다. 보여줄 그림은 많고, 보여줄 수 있는 공간이 좁을 경우에 아주 효과적으로 사용할 수 있습니다. ex2_05.html 문서는 메뉴에서 선택한 그림을 지정된 표 안에 보여주는 간단한 기법입니다. 프로그램은 간단하지만 유용하게 사용할 수 있는 예제입니다.

** 사진: 왼쪽 메뉴에서 선택한 그림을 오른쪽 표에 보여줍니다.

** 살펴볼 부분
1. 보여줄 그림 목록과 그림 파일 이름은 <OPTION> 태그에 나열해줍니다.
2. <SELECT> 태그 사용법은 본문을 참조하기 바랍니다. size 속성은 화면에 기본적으로 표시할 메뉴의 수입니다.
3. onchange 이벤트 핸들러를 이용하여 <SELECT> 태그의 값이 바뀌었을 경우 선택된 <OPTION> 태그의 value 값을 넘겨줌으로써 grimview() 가 지정된 id 영역에 그림을 표시합니다.

**소스 파일:

65.6. 이전 그림, 다음 그림 보여주기, 그림에 링크된 곳 이동하기

좁은 공간에 많은 그림을 보여줄 때 가장 기본적인 형태는 한 장소에서 그림을 보여주면서 이전 그림과 다음 그림을 선택하여 표시하는 형태입니다. ex1_06.html 문서는 ‘이전 그림’ ‘다음 그림’ 아이콘을 누를 때마다 해당 그림을 사용자가 지정한 영역에 표시해줍니다. 많은 그림을 한 공간에서 돌아가면서 보여주어야 하는 경우 유용하게 사용할 수 있습니다.

** 사진: 표의 아래 쪽에 있는 단추를 누르면 이전 그림이나 다음 그림을 돌아가면서 보여줍니다.

** 살펴볼 부분
1. 보여줄 그림 파일 이름과 링크 내용은 agrim 배열에 나열하니다.
2. 그 외 사용자가 수정할 내용은 없습니다. 그림을 보여줄 영역은 <TABLE> 명령을 수정하시면 됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex2_06.html - 이전 그림, 다음 그림 보여주기, 그림에 링크된 곳 이동하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY> 
이전 그림, 다음 그림 보여주기, 그림에 링크된 곳 이동하기<BR><BR>
    <TABLE width="300" height="300" bgcolor="ORANGE">
    <TR>
      <TD bgcolor="GOLD" height="250" valign="middle" align="center">
        <DIV id="grimpan"> <IMG src="icon/i0074.gif"> </DIV>
      </TD>
    </TR>
    <TR> <TD align="center" valign="middle">
    <FORM>
      <INPUT type=button value="이전 그림" onclick="viewpre()">
      <INPUT type=button value="다음 그림" onclick="viewnext()">
    </FORM>
    </TD>
    </TR></TABLE>
</BODY> 
</HTML>

65.7. 링크된 그림이나 문장의 점선 없애기

링크된 문서나 그림을 선택하면 선택된 그림이나 문장, 버튼, 아이콘이 사각형의 점선으로 표시되는 것을 볼 수 있습니다. 경우에 따라서 이 점선은 눈에 거슬리는 효과를 낳을 수 있습니다. 특히 자유분방한 디자인을 한 홈페이지에서 사각형의 점선이 나타나면 속이 상합니다. 그래서 많은 분들이 링크된 곳을 클릭했을 때 나타나는 점선을 없애려고 합니다. 이럴 때 사용하는 함수는 blur() 함수입니다. blur() 함수는 영역을 흐릿하게 해주는 효과를 보여주는데 링크된 곳에 사용하면 점선을 안보이게 하는 효과를 가집니다.

** 사진: 링크된 그림이나 문장을 선택하여 새 창을 열었지만 링크된 그림과 문장에 점선이 보이지 않습니다.

** 살펴볼 부분
1. onfocus 이벤트 핸들러를 이용하여 링크된 그림아나 글을 선택했을 때 blur() 함수가 실행하도록 합니다. 이렇게 하면 링크 된 그림이나 버튼, 문장을 선택했을 때 선택된 곳에 표시되는 점선이 표시되지 않습니다.
2. <A> 태그에 사용한 속성 중 _blank 값은 새 창을 열라는 뜻이고, onfocus는 마우스가 영역에 들어왔을 때를 말합니다.

**소스 파일:

65.8. 링크된 그림을 계속해서 돌아가면서 보여주기

여러 개의 그림을 계속 돌아가면서 표시하는 기법은 광고에 자주 사용하는 기법입니다. 광고를 담은 여러 개의 그림을 일정 시간마다 반복해 표시합니다. 사용자가 해당 그림을 클릭하는 순간 링크된 사이트로 이동하게 됩니다.
이 기법은 배열에 대입한 그림 파일 경로를 계속해서 차례대로 보여주면 됩니다. ex2_06.html을 응용하면 쉽게 만들 수 있습니다. setTimeout() 함수를 사용해 일정 시간 뒤에 함수를 재실행하도록 만드는 점만 다를 뿐입니다.

** 사진: 지정된 위치에 여러 개의 그림을 돌아가면서 표시합니다.

<HTML>
<HEAD>
  <TITLE> ex2_08.html - 링크된 그림을 계속해서 돌아가면서 보여주기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY onload="rollgrim()">
  링크된 그림을 계속해서 돌아가면서 보여주기<BR><BR>
    <TABLE width="250" height="300" bgcolor="ORANGE">
    <TR>
      <TD bgcolor="GOLD" height="50" valign="middle" align="center">
        <DIV> 광고판 </DIV>
      </TD>
    </TR> <TR>
      <TD bgcolor="white" valign="middle" align="center">
        <DIV id="grimpan"> </DIV>
      </TD>
    </TR></TABLE>
</BODY>
</HTML>

65.9. 링크된 그림을 무작위로 선택해 표시하기

ex2_08.html은 일정 시간마다 같은 그림을 반복해 보여줍니다. 똑 같은 패턴으로 보여주기 싫다면 무작위로 그림이나 광고를 보여줄 수 있습니다. 이때 무작위로 광고를 보여주기 위해 사용하는 함수는 random() 함수입니다. random() 함수의 사용법은 앞서 설명한 것을 참고하기 바랍니다.

** 사진: 지정된 위치에 여러 개의 그림을 무작위로 표시합니다.

** 살펴볼 부분
1. agrim 배열에 화면에 표시할 그림을 대입합니다. 링크 내용을 함께 적어주면 그림을 선택했을 때 연결된 문서로 이동합니다. 즉 광고 그림을 일정 시간마다 보여주는 경우라면 광고주의 사이트로 이동하는 것입니다.
2. setTimeout("rollgrim()",3000); 명령에서 수치를 통해 그림이 바뀌는 속도를 설정합니다. 1이 가장 빠르지만 1을 사용하는 것은 무리입니다. 1000이 1초를 뜻하므로 적당한 3000을 설정하면 3초마다 그림이 한 번씩 바뀝니다.
3. vl=agrim.length; 은 배열 요소의 크기를 알아내는 것이고, vr=Math.floor(Math.random() * vl); 명령은 랜덤 함수의 범위를 배열 요소의 크기로 지정하는 것입니다. 예제에서 vl의 값은 4가 되므로 이 명령은 곧 ‘vr=Math.floor(Math.random() * 4’가 됩니다. 랜덤 함수에 4를 곱하면 되돌림값은 0~3까지 4가지 숫자 중의 하나를 돌려줍니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex2_09.html - 링크된 그림을 무작위로 선택해 표시하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY onload="rollgrim()">
  링크된 그림을 무작위로 선택해 표시하기<BR><BR>
    <TABLE width="250" height="300" bgcolor="ORANGE">
    <TR>
      <TD bgcolor="GOLD" height="50" valign="middle" align="center">
        <DIV> 광고판 </DIV>
      </TD>
    </TR> <TR>
      <TD bgcolor="white" valign="middle" align="center">
        <DIV id="grimpan"> </DIV>
      </TD>
    </TR></TABLE>
</BODY>
</HTML>

65.10. 마우스 커서 따라다니는 꽃잎이나 기타 그림들

아마도 어떤 사이트에서 마우스를 따라다니는 꽃잎이나 커서 모양을 보신 적이 있을 겁니다. 특정 그림이 마우스를 따라다니는 효과는 화려한 느낌을 줍니다. 특히 그 그림이 멋질 경우 사용자가 사이트를 돌아다니는 동안 매우 동적인 느낌을 줍니다. ex2_10.html은 여러 개의 레이어를 이용하여 마우스를 따라다니는 그림을 구현합니다. 적절한 그림을 사용하면 홈페이지를 화사하게 꾸미는데 효과를 볼 수 있습니다.

** 사진: 꽃잎 그림이 마우스를 따라다니면서 자취를 그립니다.

** 살펴볼 부분
1. 한 화면에 동시에 표시될 그림의 수는 <DIV> 태그 명령으로 추가하거나 삭제합니다. 본 예제는 7개의 그림을 보여주도록 설정했습니다. <DIV> 태그에 그림을 추가할 경우 <DIV> 태그의 id 값에 사용한 id 이름의 숫자를 하나씩 증가시켜주고, <IMG> 태그의 name 값의 숫자도 하나씩 증가시켜 줍니다. 그리고 vgrimnu, vn 변수의 숫자를 그림 숫자에 맞춥니다.
2. setInterval('viewgroup();',4); 명령은 그림이 따라다니는 속도를 설정합니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex2_10.html - 마우스 커서 따라다니는 꽃잎이나 기타 그림들 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY>
  마우스 커서 따라다니는 꽃잎이나 기타 그림들<BR><BR>
  <DIV id="cur1" style="position:absolute; ">
  <IMG src="icon/i0101.gif" border=0 name="curgrim1"></DIV> 
  <DIV id="cur2" style="position:absolute; ">
  <IMG src="icon/i0101.gif" border=0 name="curgrim2"></DIV> 
  <DIV id="cur3" style="position:absolute; ">
  <IMG src="icon/i0101.gif" border=0 name="curgrim3"></DIV> 
  <DIV id="cur4" style="position:absolute; ">
  <IMG src="icon/i0101.gif" border=0 name="curgrim4"></DIV> 
  <DIV id="cur5" style="position:absolute; ">
  <IMG src="icon/i0101.gif" border=0 name="curgrim5"></DIV> 
  <DIV id="cur6" style="position:absolute; ">
  <IMG src="icon/i0101.gif" border=0 name="curgrim6"></DIV> 
  <DIV id="cur7" style="position:absolute; ">
  <IMG src="icon/i0101.gif" border=0 name="curgrim7"></DIV> 
</BODY> 
</HTML>

65.11. 그림이 점차 커지는 효과

ex2_11.html은 문서를 불러올 때 특정 영역에 표시되는 그림이 점차 커지다가 멈추는 효과를 보여줍니다. 이 예제는 홈페이지 시작 화면이나 로고를 보여주는 화면에 사용할 수 있습니다. 그림이 점차 커지기 때문에 애니메이션 효과를 보여줍니다.

** 사진: 그림이 점차 커지다가 다 커지면 멈춥니다.

** 살펴볼 부분
1. var vgwidth=20; 명령의 vgwidth 변수는 그림의 크기를 지정할 때 사용하는 변수인데, 처음 선언할 때 처음 보여줄 크기를 함께 대입해줍니다. 즉 시작할 때의 그림 크기를 지정합니다.
2. vmaxwidth 변수는 그림의 최대 크기를 지정합니다. 작은 그림을 확대시킬 수도 있지만 가능한 원래 그림의 해상도에 맞추어주는 것이 좋습니다.
3. vzoom은 그림을 몇 픽셀 단위로 확대할 것인가를 설정하는 것이고, vdelay는 그림을 확대하는 시간 간격입니다. 그림 크기에 따라서 적절한 단위와 시간을 지정하면 빠르게 확대되는 효과나 부드럽게 확대되는 효과를 얻을 수 있습니다. vzoom과 vdelay의 수치를 작게 설정하면 부드럽게 확대되고, 크게 설정하면 빠르게 확대됩니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex2_11.html - 그림이 점차 커지는 효과 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY> 
  그림이 점차 커지는 효과<BR><BR>
    <TABLE width="450" height="400" bgcolor="ORANGE">
    <TR>
      <TD bgcolor="GOLD" valign="middle" align="center">
         <DIV id="zoomin"> </div>
      </TD>
    </TR></TABLE>
</BODY> 
</HTML>

65.12. 그림이 점차 커졌다 작아졌다 반복하기

ex2_11.html은 딱 한 번만 그림을 확대시켜주기 때문에 시작 화면이나 로고를 한 번 보여주는 용도로 적당합니다. 또는 문서를 불러올 때 한 번만 확대되므로 광고에 시선을 집중시키고자 할 때 사용할 수 있습니다. 반면 계속해서 확대를 반복하거나 확대와 축소를 반복시키는 경우에는 지속적인 시선 집중을 유도할 수 있습니다.

ex2_12.html은 그림을 반복해 확대 축소해줍니다. 만약 확대만 하고 싶다면 확대 명령만 사용하면 되고, 축소만 하고 싶다면 축소 명령만 사용하면 됩니다. 또한 배열을 응용하여 여러 개의 그림을 돌아가면서 표시할 수도 있습니다.
본 예제는 화면을 보여주려고 그림 크기가 큰 것을 사용했지만 실제로 홈페이지에 사용할 때는 이보다 작은 그림을 사용하게 될 것입니다. 이때 확대 단위와 지연 시간을 잘 조절하면 원하는 광고 효과를 얻을 수 있습니다.

** 사진: 그림이 점차 확대 축소를 반복합니다.

<HTML>
<HEAD>
  <TITLE> ex2_12.html - 그림이 점차 커졌다 작아졌다 반복하기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript">  </SCRIPT>
</HEAD>
<BODY> 
  그림이 점차 커졌다 작아졌다 반복하기<BR><BR>
    <TABLE width="450" height="400" bgcolor="ORANGE">
    <TR>
      <TD bgcolor="GOLD" valign="middle" align="center">
         <DIV id="zoomin"> </div>
      </TD>
    </TR></TABLE>
</BODY> 
</HTML>

65.13. 두 개의 그림이 겹치면서(오버랩) 바뀌기

그림을 번갈아가면서 보여줄 때 필터 효과를 사용하면 더욱 멋있는 효과를 얻을 수 있습니다. 익스플로러는 필터라는 기능을 지원하기 때문에 다양한 필터링 기법을 사용할 수 있습니다.

** 사진: 그림이 겹치면서(오버랩되면서) 점차 다음 그림으로 표시됩니다.

** 살펴볼 부분
1. 그림 파일 이름은 각각의 변수에 추가시킵니다. 그림이 많다면 배열을 응용하도록 합니다.
2. vn 변수는 그림의 수를 입력하고, vm 변수는 그림 수보다 1 적게 입력합니다.
3. setTimeout("fchange()", 6000); 의 수치는 다음 그림을 보여줄 때까지의 대기 시간입니다. 수치가 클수록 대기 시간이 길어집니다.
4. "filter: blendTrans(duration=2)“ 부분에서 duration 은 필터를 적용하는 시간입니다. 즉 두 개의 그림을 교차하는 시간입니다. 2라고 적으면 2초 동안 필터링이 이루어집니다. 적당한 시간을 지정합니다.

**소스 파일:

<HTML>
<HEAD>
  <TITLE> ex2_13.html - 두 개의 그림이 겹치면서(오버랩) 바뀌기 </TITLE>
  <STYLE type="text/css">  </STYLE>
  <SCRIPT language="JavaScript"> <!--
     var grim1 = new Image();         //사용할 그림을 변수에 추가함
     grim1.src = "icon/i0011.jpg"; 
     var grim2 = new Image(); 
     grim2.src = "icon/i0012.jpg"; 
     var grim3 = new Image(); 
     grim3.src = "icon/i0013.jpg"; 
     var grim4 = new Image(); 
     grim4.src = "icon/i0014.jpg"; 
     var vn = 4;                //사용하는 그림 수 입력
     var vm = 3;                //vn보다 1 적게 입력

65.14. 커튼 형식으로 그림을 바꾸어 표시하기

글이나 그림을 번갈아가면서 보여줄 때 커튼 형식으로 보여주는 예제입니다. 링크된 문장과 함께 사용할 수 있기 때문에 광고 표시용으로 적당합니다.

** 사진: 글과 그림이 커튼 방식으로 열렸다가 닫히면서 표시됩니다.

** 살펴볼 부분
1. ex2_14.html 문서를 불러옵니다.
2. 배열 agul 에 표시할 문장 내용을 적고, agulurl 에는 링크를 설정합니다. agrim 배열은 화면에 함께 표시할 그림의 경로입니다.

65.15. 조각난 그림이 모여서 하나로 표시되는 기법

조각난 그림이 날라와 하나로 합쳐치는 기법입니다. 애니메이션 효과를 가지므로 시작 화면이나 로고 화면을 보여주는 문서에 사용하면 적당합니다.

** 사진: 조각난 그림이 화면에서 날라와 하나로 합쳐진 다음에 표시됩니다.

** 살펴볼 부분
1. ex2_15.html 문서를 불러옵니다.
2. 배열 agrim에 표시할 그림을 적습니다.
3. setTimeout("changeimage()",2000) 의 수치를 조절하면 이동 속도를 설정합니다.