이미지 맵 에디터없이 이미지 맵을 만드는 방법

이미지 맵은 단순한 HTML 태그 일뿐입니다.

이미지 맵은 웹 사이트를 활기 차게 만드는 재미 있고 흥미로운 방법입니다. 이미지 맵을 사용하면 이미지를 업로드하고 해당 이미지의 일부를 다른 온라인 자산으로 클릭 할 수 있습니다. 꼬집고 이미지 맵 편집기를 다운로드하고 싶지 않은 경우 HTML 태그를 사용하여지도를 만드는 것이 간단합니다.

이미지, 이미지 편집기 및 일종의 HTML 편집기 또는 텍스트 편집기가 필요합니다. 대부분의 이미지 편집기는 이미지를 가리킬 때 마우스의 좌표를 보여줍니다. 이 좌표 데이터는 이미지 맵을 시작하는 데 필요한 것입니다.

이미지 맵 만들기

이미지 맵을 만들려면 먼저지도의 기초가 될 이미지를 선택하십시오. 이미지는 "보통 크기"여야합니다. 즉, 브라우저에서 크기를 조정할만큼 큰 이미지를 사용해서는 안됩니다.

이미지를 삽입하면지도의 좌표를 식별하는 추가 속성이 추가됩니다.

이미지 맵을 만들면 이미지에서 클릭 할 수있는 영역이 만들어 지므로 맵의 좌표는 선택한 이미지의 높이와 너비와 일렬로 있어야합니다. 지도는 세 가지 유형의 도형을 지원합니다.

영역을 만들려면 매핑하려는 특정 좌표를 분리해야합니다. 지도는 이미지에서 하나 이상의 정의 된 영역으로 구성되어 클릭 할 때 새 하이퍼 링크를 엽니 다.

직사각형의 경우 왼쪽 상단과 하단 오른쪽 모서리 만 매핑합니다. 모든 좌표는 x, y (위, 위)로 나열됩니다. 따라서 왼쪽 위 모서리 0,0과 오른쪽 아래 모퉁이 10,15에 대해 0,0,10,15를 입력 합니다 . 그런 다음지도에 포함시킵니다.

다각형의 경우 각 x, y 좌표를 따로 매핑합니다. 웹 브라우저는 자동으로 마지막 좌표 세트를 첫 x 째 세트와 연결합니다. 이 좌표 안에있는 것은지도의 일부입니다.

모양은 직사각형과 같은 두 좌표 만 필요하지만 두 번째 좌표의 경우 원의 중심에서 반경 또는 거리를 지정합니다. 따라서 중심이 122,122이고 반지름이 5 인 서클의 경우 122,122,5를 작성합니다.

모든 영역과 모양이 동일한지도 태그에 포함될 수 있습니다.

<지역 모양 ="circ "coords ="122,122,5 "href ="catbert.htm "alt ="Catbert ">

고려 사항

이미지 맵은 1990 년대의 웹 1.0 시대에서 2000 년대 초반에 훨씬 더 흔하게 나타났습니다. 이미지 맵은 종종 웹 사이트 탐색의 기초를 형성했습니다. 디자이너는 메뉴 항목을 나타내는 그림을 작성한 다음지도를 설정합니다.

현대적인 접근 방식은 반응 형 디자인을 장려하고 계단식 스타일 시트를 사용하여 페이지의 이미지 및 하이퍼 링크 배치를 제어합니다.

지도 태그가 HTML 표준에서 계속 지원되지만 소형 폼 팩터가있는 모바일 장치를 사용하면 이미지 맵에서 예상치 못한 성능 문제가 발생할 수 있습니다. 또한 대역폭 문제 또는 깨진 이미지는 이미지 맵의 가치를 떨어 뜨립니다.

이제 웹 디자이너와 함께보다 효율적인 대안이 있다는 것을 알고 안정적이고 잘 이해 된이 기술을 계속 사용하십시오.