html 에서 이미지맵은 큰 이미지에 좌표와 범위를 설정하고 이미지의 특정 구역을 클릭하면 이벤트를 발생시키는데 사용된다. 주로 이미지를 이용한 설명서나 사용자의 이해를 위해 사용되기도 하는데, 단점이 있다면 이미지의 크기와 용량에 제약이 생길 수 있다. 이미지의 해상도가 크고, 크기와 용량이 클수록 웹페이지의 속도는 느려질 수 있다.
html 이미지 맵 사용
using html image map
html 웹페이지에서 마우스 클릭을 유도하는 것은 사용자로 하여금 컨텐츠에 흥미를 유발하도록 하는 것이다.
만약 이러한 흥미를 위해 이미지를 많이 쪼개서 사용할 수도 있는 경우들이 있는데 편집과 화면배치에 번거로움이 발생할 수 있다.
지금은 다른 css 스타일로써 이런 문제를 해소할 수 있지만, 간헐적으로 커다란 이미지를 사용하여 이미지 자체에 좌표를 특정하여 클릭을 유발하도록 할 수 있다.
단점이 있다면, 이미지의 크기 때문에 웹페이지의 속도에 영향이 미칠 수 있다는 점이다.
이미지 맵 태그 img, map, area
큰 이미지에 좌표를 설정하는 것은 여러가지로 좋은 이점이 있을 수도 있다.
이미지 중심의 메뉴얼이나 음식 소개 같은 것들은 마우스 클릭이나 다른 이벤트를 통해 사용자에게 추가적인 정보를 줄 수 있을 수 있다.
이미지의 용량과 크기가 문제겠지만, 이건 용량을 줄이고 해상도를 조절하면 된다.
아래는 이미지 태그에 이미지 맵을 적용하여 이미지에 좌표를 설정하는 방법이다.
img 태그의 usemap 속성에 map 으로 사용할 name 을 지정한다.
map 태그에 img 태그에서 사용할 name을 설정한다.
area 태그를 통해 이미지의 좌표의 범위를 지정하고 이동할 페이지를 지정한다.
<img src="이미지 지정" alt="대체 텍스트" usemap="map 태그 name 지정">
<map name="태그 name">
<area shape="클릭 범위" coords="x좌표, y좌표, 너비, 높이" alt="대체 텍스트" href="이동할 페이지">
</map>샘플코드
위의 내용이 조금 복잡하다.
이미지 내부에 좌표를 지정하여 특정 구역을 클릭했을 때 이동하는 것을 만드는 것은 어쩌면 비효율적일 수도 있다.
지금은 많은 css 스타일과 방법론들이 있기에 이 방법은 부적절 할 수도 있겠지만, 알아만 두도록 하자.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
img {
width:100px;
}
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
</div>
</body>
<!-- // -->
</html>
<!-- // -->'programming > web' 카테고리의 다른 글
| html 태그 배경 이미지 반복 속성하기 using html tag background image repeat attribute (0) | 2022.06.09 |
|---|---|
| html 배경 이미지 사용하기 using html background image (0) | 2022.06.07 |
| html 이미지에 링크 연결 하기 how to link image to link in html (0) | 2022.06.01 |
| html img 태그 이미지 경로 지정 방법 Specifies img src path (0) | 2022.05.30 |
| html 이미지 크기 조절 하기 changing image size in html (0) | 2022.05.27 |
댓글