차례:
- 요소를 사용하면 다른 이미지와 마찬가지로지도 이미지를 페이지에 추가 할 수 있습니다. 또한 usemap 속성을 포함시켜 브라우저가 이미지 맵 정보가 해당 이미지와 함께 있어야 함을 알리십시오. usemap 속성의 값은 맵의 이름입니다.
- 이 그림은 브라우저가이 마크 업을 표시하는 방법을 보여줍니다.
비디오: Paper2D: Project Setup | 02 | v4.4 Tutorial Series | Unreal Engine 2024
웹 페이지는 종종 탐색을 위해 이미지를 사용합니다. 그것들은 일반 텍스트 링크보다 더 예뻐서 한 요소로 페이지에 양식과 기능을 모두 추가 할 수 있습니다. 앵커 요소와 함께
이미지 맵을 만들려면 두 가지가 필요합니다.
지도의 다른 영역을 다른 URL에 매핑하는 마크 업
요소 및 속성
요소를 사용하면 다른 이미지와 마찬가지로지도 이미지를 페이지에 추가 할 수 있습니다. 또한 usemap 속성을 포함시켜 브라우저가 이미지 맵 정보가 해당 이미지와 함께 있어야 함을 알리십시오. usemap 속성의 값은 맵의 이름입니다.
요소의 usemap 값과 일치해야합니다.
-
영역은지도의 특정 부분을 URL에 연결합니다. area 요소는 이러한 속성을 사용하여지도의 각 섹션에 대한 세부 사항을 정의합니다.
-
모양: 영역의 모양 (이미지 맵을 작동하게하는 클릭 가능한 핫 스폿)을 지정합니다. rect (직사각형), circle 및 poly (삼각형 또는 다각형) 중에서 선택할 수 있습니다.
coords: 지역의 좌표를 정의합니다.-
사각형의 좌표는 왼쪽, 오른쪽, 위쪽 및 아래쪽 점을 포함합니다.
-
원의 좌표에는 원의 중심뿐만 아니라 원의 반지름에 대한 x 및 y 좌표가 포함됩니다.
다각형의 좌표는 다각형의 모든 정점에 대한 x 및 y 좌표의 모음입니다.
이미지 좌표를 결정하기 위해 Mapedit 같은 이미지 맵 편집기 또는 PaintShop Photo Pro와 같은 그래픽 편집기를 사용할 수 있습니다. Mapedit은 이러한 좌표를 기록합니다.
href: 영역이 연결되는 URL을 지정합니다 (절대 또는 상대 일 수 있음).
alt: 이미지 영역의 대체 텍스트를 제공합니다.
-
마크 업
-
다음은 09fg08-navmap이라는 그래픽 파일에 연결된 NavMap이라는 3 영역 맵을 정의합니다. gif:
-
이 그림은 브라우저가이 마크 업을 표시하는 방법을 보여줍니다.
마우스가지도의 한 영역 위에 놓이면 커서는 다른 하이퍼 링크보다 바뀌는 것처럼 가리키는 손 모양이됩니다.제목 텍스트를 활용하여 링크에 대한 유용한 정보를 포함하고 시각 장애인이지도에 더 쉽게 액세스 할 수있게하십시오.
이미지 맵의 일반적인 용도는 장소 (주, 국가 등)의 맵을 링크 가능 맵으로 변환하는 것입니다. 사용할 수있는 온라인 리소스는 다음과 같습니다.
정보. com 이미지지도 자습서는 직접 이미지 맵을 작성하는 방법에 대해 자세히 설명합니다.
HTMLGoodies에는 멋진 이미지지도 자습서 및 정보 모음이 있습니다.
-
손으로 이미지 맵을 생성하는 것은 까다로울 수 있습니다. 이미지 편집기를 사용하여지도의 각 지점을 식별하고
-
다음에
적절한 마크 업을 만듭니다. 대부분의 HTML 도구에는 이미지 맵을 만들 수있는 유틸리티가 포함되어 있습니다. 이러한 도구를 활용하면 오류없이 신속하게 이미지 맵을 만들 수 있습니다. 이미지 맵을 사용할 때는주의해야합니다. 시각 보조 기능 (예를 들어 다른 국가에 대한 링크가있는지도와 같은 것)을 만드는 경우 이미지지도를 사용하는 것이 좋습니다. 반면에, 당신은 당신의 메인 네비게이션을위한 이미지 맵을 가진 그래픽을 절대 사용해서는 안됩니다. 할 수는 있지만
결과는 마음에 들지 않습니다. 기본 웹 사이트 탐색을 위해 항상 HTML과 CSS를 사용하거나 그래픽 이미지 맵을 사용해야하는 경우, 시각 장애가있는 사이트 방문자가 대신 대체 컨트롤을 사용하여 탐색 할 수 있도록 해당 맵과 함께 제공됩니다. 일반적으로 탐색을위한 가장 좋은 방법은 버튼 레이블에 텍스트를 사용하고 CSS가 버튼을 잘 만드는 데 필요한 작업을 처리하도록하는 것입니다.
