이미지 맵 사용의 이점과 단점
많은 사이트에서 "이미지 맵"으로 알려진 피쳐를 사용하는 웹 디자인의 역사가있었습니다. 이것은 페이지의 특정 이미지에 첨부 된 좌표 목록입니다. 이러한 좌표는 해당 이미지에 하이퍼 링크 영역을 생성하며 그래픽에 "핫 스폿"을 추가해야하며 각 영역은 서로 다른 위치로 연결되도록 코딩 할 수 있습니다. 이는 이미지에 링크 태그를 추가하는 것만 큼 다른데, 전체 그래픽이 단일 대상에 대한 하나의 큰 링크가됩니다.
예 - 미국 이미지가있는 그래픽 파일이 있다고 상상해보십시오. 특정 상태에 대한 페이지로 이동할 수 있도록 각 상태를 "클릭 가능"하게하려면 이미지 맵을 사용하여이를 수행 할 수 있습니다. 마찬가지로 음악 밴드의 이미지가있는 경우 이미지 맵을 사용하여 각 개별 회원을 클릭하여 해당 밴드 멤버에 관한 다음 페이지로 이동할 수 있습니다.
이미지 맵이 유용합니까? 그들은 분명히 그렇지만 오늘날의 웹에 대해서는별로 선호하지 않습니다. 이것은 이미지 맵이 특정 좌표를 필요로하기 때문에 적어도 부분적으로는 그렇습니다. 현재 사이트 는 화면 이나 장치 의 크기에 따라 반응 형 이며 이미지 크기 가되도록 제작되었습니다 . 즉, 이미지가 작동하는 방식 인 사전 설정 좌표가 사이트의 크기가 조정되고 이미지의 크기가 바뀔 때 분리됩니다. 그렇기 때문에 이미지 맵은 오늘날 프로덕션 사이트에서는 거의 사용되지 않지만 데모 또는 페이지 크기를 강요하는 인스턴스에서는 여전히 장점이 있습니다.
Dreamweaver를 사용하여 이미지 맵을 만드는 방법, 특히 이미지 맵을 만드는 방법을 알고 싶습니까? . 이 과정은 특히 어렵지는 않지만 쉬운 일도 아니므로 시작하기 전에 경험이 있어야합니다.
시작하기
시작하자. 취해야 할 첫 번째 단계는 웹 페이지에 이미지를 추가하는 것입니다. 그런 다음 이미지를 클릭하여 강조 표시합니다. 거기에서 속성 메뉴로 이동하여 사각형, 원 또는 다각형과 같은 세 가지 핫 스폿 그리기 도구 중 하나를 클릭해야합니다. 속성 표시 줄에서 이미지의 이름을 지정하는 것을 잊지 마십시오. 당신이 원하는 무엇이든. "지도"를 예로 사용하십시오.
이제 이러한 도구 중 하나를 사용하여 이미지에 원하는 모양을 그립니다. 직사각형 반점이 필요하면 직사각형을 사용하십시오. 동그라미와 동일합니다. 더 복잡한 핫스팟 셰이프를 원하면 다각형을 사용하십시오. 이것은 다각형을 사용하면 점을 떨어 뜨리고 이미지에 매우 복잡하고 불규칙한 모양을 만들 수 있으므로 미국지도의 예에서 사용하게 될 것입니다
핫스팟의 등록 정보 창에서 핫스팟이 링크되어야하는 페이지를 입력하거나 찾아보십시오. 이것은 링크 가능 영역을 만드는 것입니다. 지도가 완성되고 추가하려는 모든 링크가 추가 될 때까지 핫스팟을 계속 추가하십시오.
작업이 완료되면 브라우저에서 이미지 맵을 검토하여 제대로 작동하는지 확인하십시오. 각 링크를 클릭하여 적절한 리소스 또는 웹 페이지로 이동하십시오.
이미지 맵의 단점
다시 한번 말하지만, 이미지 맵에는 반응 형 웹 사이트에 대한 지원 부족과는 별도로 여러 단점이 있습니다. 전나무, 작은 세부 사항은 이미지 맵에서 가려 질 수 있습니다. 예를 들어 지리적 이미지 맵은 사용자의 출현 지역을 파악하는 데 도움이 될 수 있지만 이러한지도는 사용자의 출신 국가를 정확하게 파악하기에는 충분하지 않을 수 있습니다. 즉, 사용자가 아시아 출신인지 여부를 판단하는 데 이미지 맵이 도움이 될 수 있지만 특히 캄보디아 출신인지는 확인할 필요가 없습니다.
이미지 맵은 또한 천천히로드 될 수 있습니다. 웹 사이트의 각 페이지에서 너무 많은 공간을 차지하므로 웹 사이트에서 여러 번 사용하면 안됩니다. 한 페이지에 이미지 맵이 너무 많으면 심각한 병목 현상과 사이트 성능 에 큰 영향을줍니다.
마지막으로, 시각적 인 문제가있는 사용자가 이미지 맵에 액세스하는 것이 쉽지 않을 수 있습니다. 이미지 맵을 사용한 경우 이러한 사용자를위한 다른 네비게이션 시스템을 대안으로 만들어야합니다.
결론
디자인의 빠른 데모와 작동 원리를 함께 모으기 위해 이미지 맵을 사용합니다. 예를 들어 모바일 앱용 디자인을 조롱하고 이미지지도를 사용하여 앱의 상호 작용을 시뮬레이션 할 수있는 핫스팟을 만들고 싶습니다. 앱을 코딩하는 것보다 HTML 또는 CSS를 사용하여 현재 표준에 맞게 제작 된 더미 웹 페이지를 만드는 것이 훨씬 쉽습니다. 이 특정 예에서는 디자인을 데모 할 장치를 알기 때문에 해당 장치의 코드를 확장 할 수 있지만 이미지 맵은 작동하지만 프로덕션 사이트 나 앱에 넣는 것은 매우 까다 롭습니다. 따라서 오늘날의 웹 사이트.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집 : 9/7/17