동적 HTML은 생동감 넘치는 것처럼 보이지만 사실 웹 전체는 여전히 거의 정적인 상태입니다. 물론 좀 더 아방가르드한 웹사이트 중 일부는 한동안 대화형 콘텐츠를 갖고 있었지만 대부분은 여전히 플러그인을 사용하거나 다양한 브라우저 버전에 대해 여러 페이지를 작성하여 구현됩니다. 대부분의 웹 페이지 제작자는 여러 버전의 페이지를 작성하고 싶어도 시간을 내기가 어렵습니다. 또한 대화형 효과를 얻을 수 있는 웹 페이지는 일반적으로 두 가지 버전 모두에서 허용되지 않습니다. 작가와 시청자. 그러나 반드시 이렇게 될 필요는 없습니다. 여기에서는 낮은 대역폭 조건에서 웹 페이지에 DHTML 효과를 추가하는 빠르고 쉬운 방법을 배울 수 있습니다. 이 방법은 이미지를 로드하거나 여러 페이지를 작성할 필요가 없습니다.
더 나은 마우스 캡처 정보
Mouseover는 웹에서 가장 널리 사용되고 효과적인 동적 방법 중 하나이며, 그 이유는 뷰어가 명확하고 직접적인 피드백을 얻을 수 있다는 것입니다. 다음과 같이 생각해보세요. 하이퍼텍스트 링크 위로 마우스를 이동하면 링크가 강조 표시되거나 색상이 바뀌거나 "나는 링크입니다!"라고 말하는 것으로 변경됩니다.
이는 생성된 모든 마우스오버 링크가 동일하다는 의미는 아닙니다. 그들은 다릅니다. 최악의 상황은 마우스 오버 링크가 Java 언어 또는 Macromedia의 Shockwave 형식과 같은 특수 형식으로 구현되어 뷰어가 효과를 보려면 플러그인을 설치해야 한다는 것입니다. 가장 좋은 시나리오는 마우스 오버 링크가 모든 브라우저에서 지원되는 JavaScript로 작성된다는 것입니다. 하지만 JavaScript로 구현하더라도 여전히 브라우저에서 고휘도용 이미지와 일반 디스플레이용 이미지 두 개를 로드해야 하므로 대역폭 활용이 낭비됩니다.
이제 이미지를 로드하지 않고 마우스 오버 링크를 생성하는 DHTML을 살펴보겠습니다. 유일하게 주목해야 할 점은 링크 및 스타일과 같은 웹 페이지 개체를 열려면 브라우저에서 DHTML 코드를 열어야 DOM(문서 개체 모델)에서 설명할 수 있다는 것입니다. 즉, 코드는 현재 Internet Explorer 4.0에서만 작동합니다. 하지만 넷스케이프의 5세대 브라우저(올해 말 출시 예정)는 DOM을 완벽하게 지원할 예정이다. 또한 호환되지 않는 브라우저에서 사용되는 마우스 오버 링크에 대해 걱정하지 마십시오. 페이지에서 DHTML 코드를 지원하지 않는 브라우저는 해당 링크를 무시합니다. (자세한 내용은 나중에 "웹 사이트에서 DOM이 작동하도록 하기" 섹션을 참조하십시오.)
코드
일반 웹 페이지는 두 가지 주요 영역으로 나뉩니다. 하나는 콘텐츠 영역이고 다른 하나는 탐색 영역입니다. 마우스 오버 링크는 일반적으로 탐색 영역에 나타납니다. 일반적으로 강조 표시된 버튼은 뷰어를 사이트 그래픽이나 피드백 페이지 등 사이트의 다양한 영역으로 안내하는 데 사용됩니다. 버튼을 사용하는 대신 일반 텍스트 링크를 대화형 마우스 오버 링크로 전환합니다. 방법은 먼저 다음과 같은 일반 텍스트 링크를 문서에 삽입하는 것입니다.
< a href="contact_us.html">
문의하기</a>
두 번째 단계에서는 마우스를 텍스트 링크 위로 이동할 때 텍스트 링크의 색상을 변경합니다. DHTML 스크립트 프로그램은 다음과 같습니다:
function Rollon( ){
if (window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "red";}
}
function Rolloff( ){
if ( window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "";}
}
document.onmouseover = Rollon;
document.onmouseout
= Rolloff;
<script> 태그 중간에 웹 페이지의 <head>에 삽입하면 각 텍스트 링크에 마우스 오버 효과를 즉시 얻을 수 있습니다. 아래에서는 이것이 어떻게 달성되는지 자세히 분석합니다.
앞서 작성된 스크립트 프로그램은 두 가지 주요 기능, 즉 Rollon(마우스가 링크 위로 움직일 때 활성화됨)과 Rolloff(마우스가 링크에서 멀어질 때 활성화됨)를 정의합니다. 각 함수는 간단한 'if' 문으로 시작합니다. 즉, 웹 문서에서 onmouseover 이벤트가 호출될 때마다 롤론 함수는 이벤트를 활성화하는 개체가 앵커 태그(window.event . srcElement.tagName == "A"). 그렇다면 스크립트는 링크에 특별한 스타일(이 경우 빨간색)을 적용합니다. 마찬가지로 onmouseout 이벤트가 발생하면 롤오프 함수는 스타일을 기본 색상(color="")으로 되돌립니다.
이 스크립트의 마지막 두 줄은 onmouseover 이벤트가 발생할 때 Rollon 기능을 실행하고 onmouseout 이벤트가 발생할 때 마우스오버 링크(mouseover) 기능을 끄도록 브라우저에 알립니다.
절반의 노력으로 두 배의 결과를 얻을 수 있습니다
. Internet Explorer 4.0에서는 DHTML을 사용하여 문서의 모든 개체를 제어할 수 있으며 당연히 앵커 태그의 색상을 변경하는 것 외에도 더 많은 기능을 얻을 수 있습니다. 실제로 캐스케이딩 스타일 시트(CSS, W3C 표준 형식 지정 사양)의 모든 요소를 모든 유형의 개체 또는 리소스 구성 요소에 적용할 수 있습니다. 예를 들어 링크를 빨간색으로 표시하는 것 외에도 밑줄을 추가하거나 제거할 수도 있습니다.
밑줄을 제거하려면 페이지의 모든 앵커 태그에 다음 스타일 속성을 삽입하기만 하면 됩니다.
style = "text-꾸밈: 없음"
이 명령문은 링크에서 밑줄을 제거하여 정상 또는 기본 상태로 보이게 합니다. (기본적으로 Internet Explorer 4.0 및 Navigator 4.0은 모든 텍스트 링크에 밑줄을 긋습니다. 위의 명령문은 이러한 링크의 기본 상태를 하나씩 변경합니다.)
그런 다음 롤론 함수 아래에 다음 명령문을 추가합니다:
srcElement.style.
textDecoration = "underline";
이제 정의한 mouseover 이벤트에 대한 리소스가 빨간색으로 바뀌고 밑줄 스타일이 적용됩니다. 밑줄은 롤오프 함수에 다음 명령문을 추가하여 제거할 수 있습니다.
window.event.srcElement.style.textDecoration
= "none";
빠르게 구현할 수 있는 위 수정 함수는 간단한 DHTML의 강력함을 보여줍니다. 스크립트 프로그램입니다. 이미지를 로드할 필요는 없지만 매우 유연하고 이식성이 뛰어난 코드를 사용하여 눈길을 끄는 시각적 효과를 생성합니다. 이를 사용하면 이전 브라우저에서도 오류가 발생합니다. 이 코드를 받아 직접 마스터하려면 당사 웹사이트( www.windowspro.com )를 방문하십시오.
------
Edward Grossman은 www.windowspro.com 웹사이트의 제작자이며 철학 박사 학위를 갖고 있으며 다음과 같은 분야의 연구에 참여했습니다. 웹이 출현하기 전의 철학. 이메일: [email protected]
문서 머리 부분에 약 15줄의 코드만 추가하면 웹 페이지의 ②일반 텍스트 링크를 ③대화형 마우스 활성화 링크(마우스오버)로 바꿀 수 있습니다.
------------
웹사이트에서 DOM을 작동시키세요.
동적 HTML(DHTML)을 사용하면 객체지향 프로그래밍은 더 이상 프로그래밍 전문가만이 할 수 있는 것이 아니라, 웹도 경험한 모든 사람의 영역이 되어가고 있습니다. 페이지 메이커가 참여할 수 있습니다. 이는 주로 문서 객체 모델(Document Object Model, DOM) 덕분입니다. 이 W3C 사양은 문서, 스타일, 링크 등 문서의 모든 구성 요소를 개체로 처리합니다. 스크립트는 사용자 입력, 브라우저 유형 또는 크기 변경, 스타일 변경, 링크 업데이트를 포함한 기타 여러 변수를 기반으로 이러한 개체를 수정할 수 있습니다.
DOM은 전체 문서를 열 수 있으므로 웹 작성자는 사용자에게 큰 다운로드 오버헤드를 부과하지 않고도 고도로 사용자 정의 가능한 대화형 페이지를 만들 수 있습니다. 이는 낮은 대역폭의 마우스 오버 링크를 활성화할 뿐만 아니라 축소 가능한 웹 탐색 메뉴 및 이동 가능한 페이지 구성 요소(예: 이미지, 텍스트 블록 등)도 활성화합니다.
DOM에 대한 자세한 내용을 보려면 www.w3.org/dom , www.microsoft.com/workshop/author/dhtml/ 및developer.netscape.com/docs/manuals/communicator/dynhtml/ 사이트를 방문하세요.
DHTML 응용 프로그램의 예를 보려면 www.windowspro.com 및 www.projectcool.com 을 방문하여(Saturn을 드래그해 보세요) "소스 보기"를 찾아보세요.
IE 4.0에서는 동적 HTML을 사용하여 수십 개의 개체를 조작할 수 있습니다. 자세한 목록은 www.microsoft.com 에서 확인할 수 있습니다.