HTML에서 ismap 속성을 사용하면 이미지를 서버 측 이미지 맵(server-side image map)으로 설정할 수 있습니다.
서버 측 이미지 맵이란, 사용자가 이미지의 특정 위치를 클릭하면 해당 좌표 정보가 URL 쿼리 문자열 형태로 서버에 전송되는 방식을 말합니다. 서버는 전달받은 좌표를 분석해 그에 맞는 응답을 반환합니다.
ismap 속성의 동작 원리
ismap 속성은 <img> 태그가 <a> 태그(하이퍼링크) 내부에 있을 때만 작동합니다. 사용자가 이미지를 클릭하면 클릭 지점의 X, Y 좌표가 링크 URL 뒤에 물음표(?)와 함께 붙어 서버로 전달됩니다. 예를 들어 다음과 같은 형식입니다:
https://example.com/map?x=150,y=120
예제 코드
아래 코드를 실행하여 ismap 속성의 실제 동작을 확인해 보세요.
<!DOCTYPE html> <html> <body> <a href=""> <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/android_penetration_testing/380_course_203_image.jpg" alt="Android Penetration Testing" width = "300" height = "250" ismap> </a> <p>이미지를 클릭하면 좌표가 URL 쿼리 문자열 형태로 서버에 전송됩니다.</p> </body> </html>
참고 사항
- ismap 속성은 불리언(boolean) 속성이므로 값 없이 속성 이름만 작성하면 됩니다.
- 클라이언트 측 이미지 맵을 구현하려면
<map>과<area>태그와 함께 usemap 속성을 사용하는 것이 좋습니다. - 서버 측 이미지 맵은 서버에서 좌표를 처리하는 별도의 프로그램이 필요하기 때문에, 현재는 유지보수가 쉬운 클라이언트 측 방식이 더 널리 사용됩니다.