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