JavaScript 및 그래픽 사용

인터넷 순수 주의자들은 월드 와이드 웹을 주로 정보를 전파하는 수단으로 간주합니다. 이러한 정보의 대부분은 텍스트 형식으로되어 있으며 모든 웹 브라우저에서 쉽게 렌더링 할 수 있습니다. 그러나 웹의 시작부터 그래픽은 기본 텍스트 페이지를 향상시키는 데 중요한 역할을했습니다. 요즘에는 그래픽이 90 % 인 웹 사이트를 보는 것이 드문 일이 아닙니다. 이러한 사이트는 엄격한 정보 보급 개념을 따르지 않을 수 있지만 일부는 확실히 매력적입니다.

우리 대부분은 웹 페이지에서 텍스트와 그래픽 간의 균형을 유지하기 위해 노력합니다. 그래픽은 페이지의 모양과 가독성을 향상시키는 역할을합니다. 그래픽의 일반적인 용도에는 배너, 후원 회사의 광고, 중요한 텍스트 부분을 강조하는 컬러 글 머리 기호 등이 있습니다.

JavaScript 스크립팅 언어는 웹 페이지에 배치하는 그래픽을 향상시키는 데 사용할 수 있습니다. JavaScript를 사용하여 페이지의 그래픽 콘텐츠를 동적으로 제어 할 수 있습니다. 예를 들어 오전에 페이지 배경을 표시하고 오후에 다른 배경을 표시 할 수 있습니다. 그리고 밤에는 스타 필드 배경을 사용할 수 있습니다. 또는 JavaScript를 사용하여 디지털 시계, 적중 카운터, 막대 그래프 등의 디스플레이를 만들 수 있습니다.

이번 달 칼럼에서는 JavaScript와 그래픽을 사용할 수있는 몇 가지 방법을 자세히 설명합니다. 그러나이 토론에서 한 가지 주목할만한 주제가 누락되었습니다. 애니메이션에 JavaScript를 사용하는 것입니다. 이 주제는 곧 나올 자체 칼럼을받을 자격이 있습니다.

HTML 이미지 요소 이해

요소는 HTML 문서에서 그래픽 콘텐츠를 표현하기위한 가장 일반적으로 사용되는 태그입니다 (최신 HTML 사양이 요소를 추가,하지만 그것은 아직 넷스케이프와 다른 대부분의 브라우저에서 지원되지 않음). 시작되지 않은 경우 기본 태그 의 구문 은 다음과 같습니다.

여기서 "url"은 이미지 파일에 대해 올바르게 구성된 URL입니다. URL은 절대적이거나 상대적 일 수 있습니다. 모든 브라우저가 그래픽을 표시 할 수있는 것은 아닙니다. 따라서 이미지 문제가있는 사람들을 위해 이미지에 "대체 텍스트"를 포함하는 것이 좋습니다. 태그 내에서 ALT 속성을 사용하여 대체 텍스트를 지정하십시오. 예를 들면 다음과 같습니다.

태그로 생성 된 이미지 는 텍스트 문자처럼 취급되기 때문에 "인라인"으로 간주됩니다. 즉, 이미지에 텍스트를 삽입 할 수 있으며 브라우저가 모든 것이 올바르게 진행되는지 확인합니다.

그러나 대부분의 이미지는 이미지를 둘러싼 텍스트보다 더 큽니다. 대부분의 브라우저의 정상적인 동작은 이미지의 하단을 주변 텍스트의 하단과 같은 높이로 배치하는 것입니다. 다른 정렬을 원하면이 동작을 변경할 수 있습니다. 이미지를 표시하는 모든 브라우저에서 이해하는 가장 일반적인 정렬 선택은 다음과 같습니다.

  • bottom-텍스트를 이미지 하단에 정렬합니다. 이것이 기본값입니다.
  • middle-텍스트를 이미지 중간에 정렬합니다.
  • top-텍스트를 이미지의 상단에 맞 춥니 다.

한 번에 하나의 정렬 만 사용할 수 있습니다. 구문은 다음과 같습니다.

브라우저는 일반적으로 이미지를 "기본 크기"로 표시합니다. 예를 들어 이미지가 100 픽셀 x 100 픽셀 인 경우 브라우저 화면에 렌더링 될 때 그 크기입니다. 그러나 Netscape에서는 WIDTH 및 HEIGHT 속성을 사용하여 이미지를 더 작게 또는 더 크게 원하는 경우 이미지의 크기를 변경할 수 있습니다. 이러한 속성의 장점은 사용시 브라우저가 이미지에 대한 빈 상자를 만든 다음 전체 페이지가로드 될 때 이미지로 상자를 채운다는 것입니다. 이는 사용자에게 해당 지점에서 그래픽이 예상된다는 신호를줍니다.

  • 너비 또는 높이 만 지정하면 비율에 따라 이미지 크기가 변경됩니다. 예를 들어 정사각형 이미지의 높이와 너비를 100 픽셀로 지정합니다. 원본 이미지가 정사각형이 아닌 경우 상대적인 비율로 크기가 조정됩니다. 예를 들어 원본 이미지가 너비가 400 픽셀이고 높이가 100 픽셀 인 경우 너비를 100 픽셀로 변경하면 이미지 높이가 25 픽셀로 줄어 듭니다.

  • 너비 높이를 모두 지정 하면 원하는 방식으로 이미지의 비율을 변경할 수 있습니다. 예를 들어 400x100 픽셀 이미지를 120x120, 75x90 또는 그 밖의 다른 것으로 변환 할 수 있습니다.

예를 들면 :

주의 : 자바 스크립트와 결합 할 때태그에 항상 HEIGHT 및 WIDTH 속성을 제공 해야 합니다. 그렇지 않으면 일관성없는 결과 및 / 또는 충돌이 발생할 수 있습니다! 이주의 사항은 JavaScript 코드가 포함 된 동일한 문서에 나타나는모든태그에적용됩니다 .

이미지와 자바 스크립트 결합

JavaScript는 HTML 문서에 사용되는 이미지를 향상시키는 데 사용할 수 있습니다. 예를 들어 JavaScript를 사용하여 시간과 같은 조건부 테스트 표현식에서 선택한 이미지를 사용하여 페이지를 동적으로 만들 수 있습니다.

사실, JavaScript와 다양한 GIF 이미지를 사용하는 JavaScript 디지털 시계 애플리케이션은 웹에서 가장 인기있는 애플리케이션 중 하나입니다. clock.html 예제는 JavaScript를 사용하여 큰 녹색 LED 숫자를 사용하여 현재 시간을 표시합니다. 각 숫자는 디지털 시계의 얼굴을 형성하기 위해 JavaScript로 함께 묶인 개별 GIF입니다.

Russ Walsh에서 제공 한 숫자 GIF를 사용했습니다. Russ는 적절한 크레딧이 제공되는 한 친절하게 자신의 GIF를 웹 페이지에서 자유롭게 사용할 수 있도록 허용합니다. 시계에 원하는 숫자를 사용할 수 있지만 각 숫자에 대해 별도의 GIF 파일을 제공하고 콜론 및 오전 / 오후 표시기에 대해 각각 별도의 파일을 제공해야합니다. 사용할 숫자 파일을 참조하도록 clock.html 코드를 변경하십시오.

참고 :사용하는 이미지에대한 절대 URL을제공하는 것이 중요합니다 . 그렇지 않으면 Netscape는 그래픽을 표시하지 않습니다. clock.html 예제는 함수 (pathOnly)를 사용하여 문서의 현재 경로를 추출합니다. 따라서 스크립트는 문서와 동일한 경로에서 이미지를 찾을 것으로 예상합니다. 또는 이미지를 다른 곳에 배치하는 경우 절대 URL을 하드 코딩하거나 문서 시작 부분에 태그를 사용하여 Netscape에 사용하려는 기본 URL을 명시 적으로 알릴 수 있습니다.

자바 스크립트 디지털 시계

자바 스크립트 디지털 시계 var Temp; setClock (); function setClock () {var OpenImg = ' 'Temp = ""now = new Date (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); 지금 = null; if (CurHour> = 12) {CurHour = CurHour-12; Ampm = "pm"; } else Ampm = "am"; if (CurHour == 0) CurHour = "12"if (CurMinute <10) CurMinute = "0"+ CurMinute else CurMinute = ""+ CurMinute

CurHour = ""+ CurHour; for (Count = 0; Count 'for (Count = 0; Count <CurMinute.length; Count ++) {Temp + = OpenImg + CurMinute.substring (Count, Count + 1) + CloseImg} Temp + = OpenImg + Ampm + CloseImg}

function pathOnly (InString) {LastSlash = InString.lastIndexOf ( '/', InString.length-1) OutString = InString.substring (0, LastSlash + 1) return (OutString); }

자바 스크립트 시계

현재 시간은 다음과 같습니다. document.write (Temp);

클라이언트 측 이미지 맵과 함께 JavaScript 사용

게시 된 웹 페이지가 포함 된 서버를 제어 할 수있을만큼 운이 좋다면 서버 측 이미지 맵을 사용했을 것입니다. 이들은 작은 덩어리로 "해부 된"이미지입니다. 사용자가 각 청크를 클릭하면 서버는 다른 작업에 응답합니다.

서버 측 이미지 맵의 단점은 클릭 요청을 처리하기 위해 서버에서 실행되는 CGI 프로그램이 필요하다는 것입니다. 모든 사람이 CGI에 액세스 할 수있는 것은 아닙니다. 클라이언트 측 이미지 맵은 다음을 변경합니다. 이미지를 분석하고 사용자를 클릭 한 이미지 영역에 따라 적절한 링크로 안내하는 "지능"이 브라우저에 내장되어 있습니다. Netscape Navigator (버전 2.0 이상)는 현재이 표준을 지원하는 여러 브라우저 중 하나입니다.

Netscape는 프로세스를 한 단계 더 발전시켜 클라이언트 측 이미지 맵을 JavaScript와 통합 할 수 있습니다. 일반적인 클라이언트 측 이미지 맵에서는 다른 페이지에 연결하는 것만으로 제한됩니다. 원하는 경우 JavaScript 함수에 "연결"하여 이미지 맵에 더 많은 정보를 제공 할 수 있습니다. 예를 들어 사용자 이름과 같은 일부 정보가 제공된 경우에만 사용자가 이미지 버튼을 성공적으로 클릭 할 수있는 제어판을 만들 수 있습니다.

클라이언트 측 이미지 맵의 구조

두 개의 새로운 HTML 태그가 클라이언트 측 이미지 맵을 만드는 데 사용됩니다. 지도 구조를 정의하는 태그와 이미지 내에서 클릭 가능한 영역을 정의하는 하나 이상의 태그입니다. 이미지 맵을 생성하려면 태그를 정의하고 매핑에 이름을 지정하십시오. 구문은 다음과 같습니다.


  

대부분의지도 이름을 사용할 수 있지만 알파벳과 숫자 만 포함해야합니다. 예외는 밑줄이지만 첫 문자에 밑줄을 사용하지 마십시오. 다음으로 이미지 영역을 정의하는 하나 이상의 태그를 정의합니다. 태그는 다음 구문을 사용합니다.


  

마지막 태그 뒤에 태그를 사용하여 매핑의 끝을 나타냅니다.

마지막 항목은 이전에 정의한 지역지도에 대한 참조와 함께 사용하려는 이미지입니다. 새로운 USEMAP 속성과 함께 표준 태그를 사용 합니다. USEMAP 속성의 경우지도 이름을 제공합니다. 예를 들면 다음과 같습니다.

This map uses an image named control.gif. The tag references the map name, which is #control (note the hash before the name). Other attributes provided with the tag are no border (BORDER=0), and the width and height of the image. When your users click on the back arrow (which is the first area defined), they are sent to the index.html page. Conversely, if they click on the contents "button" (the second area defined), they are taken to a page called toc.html. And if they click on the forward arrow, they are taken to a page called backpage.html.

Adding JavaScript to image map control

JavaScript can be used to extend the functionality of client-side image maps. For added flexibility provide the name of a JavaScript function for the HREF in the tag. Instead of jumping to some page, your JavaScript code is executed in which you can do anything you want. The trick: Use the JavaScript: protocol for the URL, and follow it with the name of the function you wish to use.

For example, suppose you want users to go back only one page in the history list when they click on the back arrow. You can use the window.history.go(-1) method to jump back one page in the user's history list. You can either provide this entire function after the JavaScript: protocol, or call a user-defined function that contains this instruction. Here are both methods:


  

or ...


  

... and elsewhere in the document:

 function goBack() { window.history.go (-1); }  

Personally, I prefer the latter method, because I often need to provide a number of JavaScript functions that I want performed. But, you can use whatever method you like best and which best fits the situation.

Following is a working example of using client-side image maps with JavaScript. The buttons display an alert box to show you that the JavaScript: URL is indeed working. The forward and back buttons also work -- assuming you have pages forward and backward in your history list. If the history list is empty (you have loaded the document into a new window, for example) then the current page remains.

Client-side image map example

Client Side Image Map Example function goBack() { alert ("Back"); window.history.go (-1); }

function goForward() { alert ("Forward"); window.history.go (1); }

function toc () {alert ( "목차"); }