동적 HTML은 생동감 넘치는 것처럼 보이지만 사실 웹 전체는 여전히 거의 정적인 상태입니다. 물론 좀 더 아방가르드한 웹사이트 중 일부는 한동안 대화형 콘텐츠를 갖고 있었지만 대부분은 여전히 플러그인을 사용하거나 다양한 브라우저 버전에 대해 여러 페이지를 작성하여 구현됩니다. 대부분의 웹 페이지 제작자는 여러 버전의 페이지를 작성하고 싶어도 시간을 내기가 어렵습니다. 또한 대화형 효과를 얻을 수 있는 웹 페이지는 일반적으로 두 가지 버전 모두에서 허용되지 않습니다. 작가와 시청자. 그러나 반드시 이렇게 될 필요는 없습니다. 여기에서는 낮은 대역폭 조건에서 웹 페이지에 DHTML 효과를 추가하는 빠르고 쉬운 방법을 배울 수 있습니다. 이 방법은 이미지를 로드하거나 여러 페이지를 작성할 필요가 없습니다.
더 나은 마우스 캡처 정보
Mouseover는 웹에서 가장 널리 사용되고 효과적인 동적 방법 중 하나이며, 그 이유는 뷰어가 명확하고 직접적인 피드백을 얻을 수 있다는 것입니다. 다음과 같이 생각해보세요. 하이퍼텍스트 링크 위로 마우스를 이동하면 링크가 강조 표시되거나 색상이 바뀌거나 "나는 링크입니다!"라고 말하는 것으로 변경됩니다.
이는 생성된 모든 마우스오버 링크가 동일하다는 의미는 아닙니다. 그들은 다릅니다. 최악의 상황은 마우스 오버 링크가 Java 언어 또는 Macromedia의 Shockwave 형식과 같은 특수 형식으로 구현되어 뷰어가 효과를 보려면 플러그인을 설치해야 한다는 것입니다. 가장 좋은 시나리오는 마우스 오버 링크가 모든 브라우저에서 지원되는 JavaScript로 작성된다는 것입니다. 하지만 JavaScript로 구현하더라도 여전히 브라우저에서 고휘도용 이미지와 일반 디스플레이용 이미지 두 개를 로드해야 하므로 대역폭 활용이 낭비됩니다.
이제 이미지를 로드하지 않고 마우스 오버 링크를 생성하는 DHTML을 살펴보겠습니다. 유일하게 주목해야 할 점은 링크 및 스타일과 같은 웹 페이지 개체를 열려면 브라우저에서 DHTML 코드를 열어야 DOM(문서 개체 모델)에서 설명할 수 있다는 것입니다. 즉, 코드는 현재 Internet Explorer 4.0에서만 작동합니다. 하지만 넷스케이프의 5세대 브라우저(올해 말 출시 예정)는 DOM을 완벽하게 지원할 예정이다. 또한 호환되지 않는 브라우저에서 사용되는 마우스 오버 링크에 대해 걱정하지 마십시오. 페이지에서 DHTML 코드를 지원하지 않는 브라우저는 해당 링크를 무시합니다. (자세한 내용은 나중에 "웹 사이트에서 DOM이 작동하도록 하기" 섹션을 참조하십시오.)
코드
일반 웹 페이지는 두 가지 주요 영역으로 나뉩니다. 하나는 콘텐츠 영역이고 다른 하나는 탐색 영역입니다. 마우스 오버 링크는 일반적으로 탐색 영역에 나타납니다. 일반적으로 강조 표시된 버튼은 뷰어를 사이트 그래픽이나 피드백 페이지 등 사이트의 다양한 영역으로 안내하는 데 사용됩니다. 버튼을 사용하는 대신 일반 텍스트 링크를 대화형 마우스 오버 링크로 전환합니다. 방법은 먼저 다음과 같은 일반 텍스트 링크를 문서에 삽입하는 것입니다.
< a href="contact_us.html">
문의하기
두 번째 단계에서는 마우스를 텍스트 링크 위로 이동할 때 텍스트 링크의 색상을 변경합니다. 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;