태그는 이미지 맵에서 주로 사용됩니다. 이 태그를 통해 이미지 맵에 활성 영역(핫스팟이라고도 함)을 설정할 수 있으므로 사용자가 지정된 활성 영역으로 마우스를 이동할 수 있습니다. 클릭하시면 자동으로 해당 프리셋 페이지로 연결됩니다. 기본 구문 구조는 다음과 같습니다.
class 및 id: hot을 지정합니다. 각각 유형 및 ID 번호입니다.
alt: 핫스팟을 설정하는 데 사용되는 대체 텍스트입니다.
href: 핫스팟에 연결된 URL 주소를 설정하는 데 사용됩니다.
모양 및 좌표: 핫스팟의 모양과 크기를 설정하는 데 사용되는 두 가지 주요 매개변수입니다. 기본 사용법은 다음과 같습니다.
핫스팟의 모양을 직사각형으로 설정하는 것을 의미하며, 좌표는 왼쪽 상단 꼭지점의 좌표는 (X1, y1)이고, 오른쪽 하단 꼭지점의 좌표는 (X2, y2)입니다.
은 핫스팟의 모양을 원으로 설정하는 것을 의미하며, 원의 중심 좌표는 (X1, y1)입니다. ), 반경은 r입니다.
은 핫스팟의 모양이 다각형으로 설정되고 각 좌표가 정점은 ( X1,y1), (X2,y2), (x3,y3)…
비고: x1, y1, x2, y2의 위치는 창 크기가 아닌 사진을 기준으로 결정됩니다.
표시는 이미지 맵에서 액션의 영역을 나누기 때문에, 그것이 나누는 액션의 영역은 이미지 맵의 영역 내에 있어야 하므로 < 영역을 분할하려면 HTML을 사용해야 합니다. 또 다른 태그인
다음은 이 두 태그의 사용법을 보여주는 예입니다.
다음은 새 책장의 사진입니다. 효과는 다음과 같습니다. 마우스가 책 "Website Directory"를 클릭할 때. 책 "웹사이트 디자인 가이드"를 마우스로 클릭하면 책 소개와 주문 페이지(urlall.htm)가 표시되는 새 창이 열립니다. 마우스 클릭 시 주문 웹 페이지(siteall.htm); 책 "웹페이지 기술백과사전"에서는 책 소개와 주문 웹페이지(pagejqlall.htm)가 표시되는 새 창이 열립니다. 제작 방법:
1. 이미지를 삽입하고, 이미지의 관련 매개변수를 설정하고, ![]()
태그에 usemap="newbook" ismap 매개변수를 설정하여 이미지 맵(newbook)에 대한 참조를 나타냅니다. );
2. 이미지 맵의 효과 영역을 설정하고 이름을 지정합니다.
3. 세 권의 책 위치를 타겟팅하려면 세 개의 직사각형 작업 영역을 나누고 해당 링크 매개변수 href를 설정하세요.
이 예제의 소스코드는 다음과 같습니다.
이 글에서 소개한 효과를 만들 때 주의해야 할 몇 가지 사항:
1.
![]()
마크에 usemap 및 ismap 매개변수를 설정하는 것을 잊지 마세요. usemap의 이름 매개변수 값은 동일해야 합니다. 즉, "이미지 맵 이름"이 일치해야 합니다.
2. 동일한 "이미지 맵"은 이미지 맵의 범위 내에 있어야 합니다. 즉, 모든
태그는
