<면적> 태그는 주로 이미지 맵에 사용됩니다. 이 태그를 통해 활성 영역 (핫스팟이라고도 함)을 이미지 맵에 설정할 수 있습니다. 이렇게하면 사용자의 마우스가 지정된 활성 영역으로 이동하여 클릭하면 사전 설정 페이지에 자동으로 연결됩니다. 기본 구문 구조는 다음과 같습니다.
<area class = type id = value href = url alt = text shape = area-shape cools = value>
클래스 및 ID : 각각 핫스팟을 지정하는 유형 및 ID 번호입니다.
ALT : 핫스팟을 설정하는 데 사용되는 대체 텍스트.
HREF : 핫스팟이 연결된 URL 주소를 설정하는 데 사용됩니다.
모양 및 코디는 핫스팟의 모양과 크기를 설정하는 데 사용되는 두 가지 주요 매개 변수입니다. 기본 사용량은 다음과 같습니다.
<면적 모양 = rect 좌표 = x1, y1, x2, y2 href = url>는 세트 핫스팟이 사각형이고 왼쪽 상단 코너의 정점 좌표는 (x1, y1)이고 오른쪽 하단 코너의 정점 좌표는 (x2, y2)입니다.
<면적 모양 = 원으로 좌표 = x1, y1, r href = url> 세트 핫스팟의 모양이 원이고 중심 좌표는 (x1, y1)이고 반경은 r임을 의미합니다.
<면적 모양 = 폴리곤 좌표 = x1, y1, x2, y2 ...... href = url> 세트 핫스팟의 모양이 다각형이고 각 정점의 좌표가 (x1, y1), (x2, y2), (x3, y3)임을 의미합니다.
참고 :이 지점의 위치 x1, y1, x2, y2는 창 크기가 아니라 그림에 따라 결정됩니다.
<면적> 태그는 이미지 맵에서 행동 영역을 나누므로 분할 된 연기 영역은 이미지 맵의 영역 내에 있어야합니다. 따라서 <면적> 태그로 영역을 나누기 전에 다른 HTML 태그 <map>을 사용하여 이미지 맵의 작동 영역을 설정하고 지정된 이미지 맵의 이름을 설정해야합니다. 이 태그의 사용법은 매우 간단합니다. 즉, <map name = 이미지 맵 이름> ...... </map>.
다음은이 두 마커의 사용을 설명하는 예입니다.
다음은 새로운 책장의 사진입니다. 그 효과는 다음과 같습니다. 책을 클릭 할 때 책의 소개 및 주문 페이지를 표시하기 위해 새 창이 열립니다 (urlall.htm). 웹 사이트 디자인 전략 북을 클릭 할 때 책의 소개 및 주문 페이지를 표시하기 위해 새 창이 열립니다 (siteall.htm). 책을 클릭하면 책의 소개 및 주문 페이지 (pagejqlall.htm)를 표시하기 위해 새 창이 열립니다. 제조법:
1. 그림을 삽입하고 이미지의 관련 매개 변수를 설정 한 다음 <Img> 태그에 usemap = newbook ismap을 설정하여 이미지 맵 (Newbook)에 대한 참조를 나타냅니다.
2. <map>를 사용하여 이미지 맵의 동작 영역을 설정하고 이름을 지정하십시오 : Newbook;
3. <면적> 마크를 사용하여 세 권의 책의 위치에 따라 3 개의 직사각형 동작 영역을 나누고 링크 매개 변수 HREF를 설정하십시오.
완성 된 생산,이 예제의 소스 코드는 다음과 같습니다.
코드를 복사하십시오