자바스크립트를 이용한 이미지 분리와 밑줄 없애기
인기 있는 홈페이지의 으뜸조건은 편리함과 새로움이다. 웹페이지에 있는 이미지가 영화를 보듯 둘 혹은 그 이상의 이미지로 나뉘면서 사라진다면 방문자에게 색다른 느낌을 주지 않을까? 또 하이퍼 텍스트 링크의 밑줄을 어떻게 하면 없앨 수 있는지 그 비법도 알아보자.
지난호에는 자바스크립트를 이용해 콤보박스로 직접 이동하는 방법과 상태바에 오늘의 날짜와 현재 시각을 찍는 방법, 그리고 클라이언트 브라우저 정보를 알아내는 방법을 소개했다. 지난호에도 잠깐 언급했지만 자바스크립트는 약간의 프로그래밍 기술을 필요로 하기 때문에 초보자에게는 생소한 감이 있지만, 간단하면서도 막강한 기능 때문에 HTML의 부족한 기능을 보완해 좀더 생기발랄한 홈페이지를 연출할 수 있다.
이번호에도 자바스크립트를 사용해 볼거리를 제공하는 화면 연출 기법과 다른 사람이 자신의 홈페이지를 좀더 쉽게 방문할 수 있도록 안내하는 리모콘 구현 기법에 대해 알아보도록 하겠다. <인터넷> 7월호 NetTip에서 자바스크립트를 이용한 리모콘을 소개한 바 있지만, 이번에 소개할 리모콘은 확장된 형태의 것으로서 원격제어를 주된 목적으로 하며 실제 많은 홈페이지에서 이러한 기법을 사용하고 있다.
이미지가 분리되는 효과
영화나 컴퓨터 게임을 보다보면 어느 순간에 하나의 사진이나 이미지 따위가 마치 영혼과 육체가 분리되듯 두 개로 분리돼 각각 좌우로 사라져 가는 광경을 쉽게 목격할 수 있다. 이러한 기법은 화면 전환 등의 순간에 종종 쓰여 보는 사람으로 하여금 지루하지 않게 만드는 활력소 역할을 하곤 한다. 홈페이지에서도 마찬가지이다. 사실 정적인 화면으로 구성된 홈페이지는 아무리 좋은 내용이 있더라도 보다보면 자칫 지루해질 위험이 크다. 이럴 때 이 기법을 활용하면 방문자로 하여금 좋은 인상을 얻을 수 있게 하지 않을까? 이제부터 그와 같은 기법을 구현해보자.
방문자가 사용하고 있는 브라우저 정보 알아내기
이제 브라우저 정보나 버전을 체크하는 루틴을 만들어 보자. 갑자기 왜 이런 절차를 구현해야 하나하고 의아해 하는 독자도 있을 것이다. 이유는 이 기법이 자바스크립트 문법 일부를 제대로 인식하지 못하는 인터넷 익스플로러와 넷스케이프 4.0 이하의 버전에서 제대로 동작하지 않기 때문이다. 즉, 네스케이프 4.0 이상의 버전에서만 제대로 동작하는데, 이를 위해 현재 홈페이지를 방문한 사용자가 쓰는 웹브라우저 정보를 알아내서 체크해야 한다. 그리고 만약 제대로 동작하지 않는 인터넷 익스플로러나 4.0보다 낮은 버전의 넷스케이프일 경우 경고 메시지 따위를 띄워주면 좋을 것이다.
사실 이러한 절차를 굳이 해줄 필요는 없지만, 만약 제대로 동작하지 않는 웹브라우저에서 이 테크닉을 실행할 때 위와 같은 과정을 생략하면, 실행이 엉뚱하게 일어난 원인을 홈페이지 주인이 프로그래밍을 잘못한 탓으로 돌리게 돼 억울한 누명을 쓰게 될 소지가 다분하다.
브라우저 정보를 알아내는 방법은 지난호에도 소개했다. 아주 간단하게 (예제 1)의 HTML 소스 코드를 입력하면 된다. 저장할 파일명은 마음대로 설정하길 바란다.
(예제 1) 방문자의 브라우저 정보를 알아내는 HTML 태그
<HTML>
<HEAD>
<TITLE> 이미지가 분리되는 효과 예제 </TITLE>
<SCRIPT language="JavaScript">
// 클라이언트 브라우저 정보를 얻어내기 위한 스크립트
// 브라우저의 이름과 버전 사용자 에이전트를 얻는다.
var name = navigator.appName
var ver = navigator.appVersion
var user = navigator.userAgent
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Black">
</BODY>
</HTML>
위의 소스를 저장하고 브라우저로 보면 화면이 검은색으로 나올 뿐 아무 기능도 하지 않지만 내부적으로 자바스크립트에서 name에는 브라우저 이름이, ver에는 브라우저 버전이, user에는 사용자 에이전트 정보가 저장된다.
브라우저에 따른 경고 메시지 띄우기
이제 팡서 알아낸 정보를 이용해 경고 메시지를 띄워보자. (예제 2)는 (예제 1)의 </SCRIPT> 태그 바로 위에 추가한다.
(예제 2) 브라우저에 띄울 경고 메시지를 위한 HTML 태그
//브라우저 버전을 정수형으로 바꾼다.
var i_ver = parseInt(ver)
//브라우저가 넷스케이프가 아니거나 버전이 4.0 이하일 경우에
//경고 메세지를 보여준다.
//(내 홈페이지가 넷스케이프 4.0 이상에서 잘 볼 수 있으므로)
if(name!="Netscape" || i_ver<4){
alert("제 홈페이지는 Netscape 4.0 이상에서 잘 보실수 있습니다.")
}
(예제 1)의 코드를 꼼꼼히 살펴보기 바란다. 일단 i_ver라는 변수를 선언했다. 이때 앞서 알아낸 브라우저의 버전값이 들어있는 ver 변수를 정수로 바꾸어 i_ver 변수값으로 설정한다. 만약 버전이 3.0이라면 ver에는 3.0이 들어 있게 되고, i_ver에는 3이 들어가게 된다.
그리고 브라우저가 넷스케이프가 아니거나 혹은 버전이 4.0보다 작을 때는 alert()라는 경고 대화상자를 나타내는 함수를 실행하고, 이때 alert() 함수 따옴표에 들어 있는 문구가 화면에 출력된다. 잘 이해가 가지 않는 독자는 소스 코드를 차근차근 살펴보기 바란다.
결국 인터넷 익스플로러나 4.0보다 낮은 버전의 넷스케이프로 이 HTML 문서를 보면, 대화상자가 나타날 것이다. 물론 넷스케이프 4.0 이상에서는 이 대화상자가 뜨지 않는다.
분리되는 이미지에 이름 설정하기
이제 본격적인 이미지 분리 작업을 위해 적당한 이미지를 골라서 이름을 설정해야 한다. 이름이 있어야 이것을 이용해 자바스크립트에서 이미지 변수를 설정할 수 있기 때문이다. (예제 3)을 <BODY>와 </BODY> 태그에 삽입해보자.
(예제 3) 분리할 이미지를 위한 이름 설정 태크
<LAYER name="csucom2" left=25% top=50>
<IMG SRC="csuphoto.jpg">
</LAYER>
<LAYER name="csucom1" left=25% top=50>
<IMG SRC="csuphoto.jpg">
</LAYER>
(예제 3)에서 볼 수 있듯이, <LAYER> 태그를 이용해 두 장의 같은 이미지를 적당한 위치에 출력하고, 이름을 설정했다. 원하는 이미지 경로와 파일명을 <IMG> 태그의 SRC 항목에 적으면 된다. (예제 3)에서는 같은 이미지이지만, 첫번째로 설정한 이미지 이름은 csucom2이고 두번째로 설정한 이미지 이름은 csucom1이다. 즉, <LAYER> 태그 name 항목에 이름을 기재하는 것이다. left와 top 항목은 이미지 위치를 나타낸다.
이미지 분리 루틴 만들기
자, 이제 이 테크닉의 핵심 부분이다. 요지는 결국 같은 위치에 같은 이미지 두 장을 겹치게 찍어서 마치 한 장의 이미지가 있는 것처럼 보이게 하고, 화면에 나온 이 두 개의 이미지를 각각 좌우로 이동시키는 것이다. (예제 4)를 <SCRIPT language="JavaScript"> 바로 다음에 끼워 넣도록 한다. 단, //처리 다음에 있는 한글 주석은 입력하지 않아도 된다.
(예제 4) 이미지 분리를 위한 HTML 태그
value=5 // 맨처음에 이동하는 거리
function hideimage()
{
var image1 = document.csucom1; // 첫번째 이미지
var image2 = document.csucom2; // 두번째 이미지
if (image1.left<1600 || image2.left>-300) {
// 어디까지 이동할 것인지 판별
image1.offset(value,0);
// 첫번째 이미지는 value 위치로 이동(오른쪽)
image2.offset(-value,0);
// 두번째 이미지는 -value 위치로 이동(왼쪽)
}
else
location.replace("jvscrpt.html");
// 모든 이동을 마치면 복귀할 HTML 문서
// 한 번에 이동하는 거리는 5이다.
value += 5;
// 1/100초마다 이동한다.
setTimeout("hideimage()",10);
return;
}
이동시키는 함수를 어떻게 호출시킬까?
바로 앞에서 작성한 hideimage() 함수를 한 번 실행하면 실질적인 이미지가 분리되는 효과가 일어난다. 그렇다면 이 함수를 언제 실행시키는 게 가장 무난할까? 많은 방법이 있겠지만 버튼을 이용해 호출하는 방법이 가장 쉽고 편리하다. 다음 함수를 <BODY>와 </BODY> 태그에 삽입하되 <br>이나 <p> 등을 이용해 화면 이미지와 어울릴만한 적당한 위치에 넣도록 하자.
<FORM>
<INPUT type=button value="이미지 분리 시작" OnClick="hideimage(0);return false;">
</FORM>
이제 '이미지 분리 시작'이라고 써있는 버튼이 생성됐다. 이 버튼을 누르면 바로 이미지 분리 효과가 일어나고, 분리 효과가 끝나면 앞서의 hideimage() 함수 중간 location.replace() 함수 따옴표에 적혀있는 HTML 문서로 자동 분기한다. 이 테크닉은 http://opera.cse.cau.ac.kr/~csucom/divimg.html에서 실습할 수 있다. (리스트 1)이 이렇게 길게 설명한 테크닉의 전체 소스 코드다.
(리스트 1) 이미지 분리를 위한 HTML 소스
<HTML>
<HEAD>
<TITLE> 이미지가 분리되는 효과 예제 </TITLE>
<SCRIPT language="JavaScript">
value=5
function hideimage()
{
var image1 = document.csucom1;
var image2 = document.csucom2;
if (image1.left<1600 || image2.left>-300)
{
image1.offset(value,0);
image2.offset(-value,0);
}
else
location.replace("jvscrpt.html");
value += 5;
setTimeout("hideimage()",10);
return;
}
//클라이언트의 브라우저 정보를 얻어내기 위한 스크립트
//브라우저 이름과 버전 사용자 에이전트를 얻는다.
var name = navigator.appName
var ver = navigator.appVersion
var user = navigator.userAgent
// 브라우저 버전을 정수형으로 바꾼다.
var i_ver = parseInt(ver)
//브라우저가 넷스케이프가 아니거나 버전이 4.0 이하일 경우에
//경고 메시지를 보여준다.
//이미지 분리는 넷스케이프 4.0 이상에서만 잘 볼 수 있으므로)
if(name!="Netscape" || i_ver<4)
{
alert("이 기법은 Netscape 4.0 이상에서만 제대로 동작합니다.")
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="Black">
<LAYER name="csucom2" left=25% top=50>
<IMG SRC="csuphoto.jpg">
</LAYER>
<LAYER name="csucom1" left=25% top=50>
<IMG SRC="csuphoto.jpg">
</LAYER>
<TABLE ALIGN=center left=30% CELLPADDING=0 CELLSPACING=0 WIDTH=100 HEIGHT=20>
<TR><TD>
<FORM>
<INPUT type=button value="이미지 분리 시작" OnClick="hideimage(0);return false;">
</FORM>
</TD></TR>
</TABLE>
<p><p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center>
<font size=5 color=#ffffff>성욱이의 웃는 모습</font>
<br><font size=2 color=#ffff00>http://opera.cse.cau.ac.kr/~csucom</font>
</center>
</BODY>
</HTML>
하이퍼 텍스트 링크의 밑줄 없애기
화면을 연출하는 데 필요한 간단하면서도 유용한 테크닉 한 가지를 소개하겠다. HTML 언어는 이름에서도 알 수 있듯이 하이퍼 텍스트를 통한 링크 형태의 이동 방식을 띈다. 이러한 이동 방식은 언제 어디서나 관련 부분으로 분기를 쉽게 할 수 있다는 장점을 갖는데, 다만 그때 링크 부분은 유독 밑줄이 쳐져 있어서 알아보기는 쉽지만 자꾸 보다보면 밑줄로 인해 글자가 가려져서 내용이 잘 들어오지도 않고 왠지 지저분하다는 느낌이 들 때가 있다.
다음 예제는 일반적인 <A>태그(일반적으로 Anchor(앵커) 태그라고 부른다)를 사용해 하이퍼 텍스트 링크를 메뉴 형태로 구현한 모습이다. 그런데 이 화면을 보면 각 항목마다 밑줄이 쳐져 있어서 보기에 깔끔하지 못하고 일부분이 아닌 전체에 걸쳐 밑줄이 쳐져 있다보니 중요한 곳에 밑줄을 친다는 밑줄의 원래 의미를 흐려놓고 있다. 그렇다면 이 밑줄을 어떻게 할까? (예제 5)를 <HEAD>와 </HEAD> 태그 사이에 넣되, </TITLE> 태그 다음에 위치하도록 하면 이 밑줄을 없앨 수 있다.
(예제 5) 하이퍼 텍스트 링크의 밑줄을 없애기 위한 HTML 태그
<style>
<!--
<A:link>
{texy-decoration:red}
A:visited
{text-decoration:navy}
-->
</style>
이제 웹브라우저로 HTML 문서를 읽어오면 위의 코드를 추가한 문서는 링크 부분에도 밑줄이 쳐있지 않을 것이다. 단, 아쉬운 점이 있다면 이 테크닉은 앞에서 소개한 이미지 분리 테크닉과과 마찬가지로 넷스케이프에서는 제대로 동작하지만 인터넷 익스플로러에서는 링크의 밑줄이 지워지지 않는다.
[월간 인터넷]