💡 퀵 접속: htm.kr/map
<map> 태그는 이미지 맵을 정의하는 HTML 요소입니다.
이미지의 특정 영역을 클릭 가능한 링크로 만들 수 있게 해줍니다.
<area> 태그와 함께 사용됩니다.
<img src="world-map.jpg" alt="세계 지도" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,100,100" href="korea.html" alt="한국">
<area shape="circle" coords="200,200,50" href="japan.html" alt="일본">
<area shape="poly" coords="300,300,350,350,400,300" href="china.html" alt="중국">
</map>| 속성 | 설명 | 예시 |
|---|---|---|
| name | 이미지 맵의 이름 | name="worldmap" |
| id | 이미지 맵의 고유 식별자 | id="worldmap" |
<img src="menu.jpg" alt="메뉴 맵" usemap="#menumap">
<map name="menumap">
<area shape="rect" coords="0,0,100,50" href="home.html" alt="홈">
<area shape="rect" coords="110,0,210,50" href="about.html" alt="소개">
<area shape="rect" coords="220,0,320,50" href="contact.html" alt="연락처">
</map><img src="solar-system.jpg" alt="태양계" usemap="#solarsystem">
<map name="solarsystem">
<area shape="circle" coords="100,100,30" href="sun.html" alt="태양">
<area shape="circle" coords="200,100,20" href="mercury.html" alt="수성">
<area shape="circle" coords="300,100,25" href="venus.html" alt="금성">
</map><img src="floor-plan.jpg" alt="건물 평면도" usemap="#floorplan">
<map name="floorplan">
<area shape="poly" coords="0,0,100,0,100,100,0,100" href="room1.html" alt="1호실">
<area shape="poly" coords="110,0,210,0,210,100,110,100" href="room2.html" alt="2호실">
<area shape="poly" coords="220,0,320,0,320,100,220,100" href="room3.html" alt="3호실">
</map>/* 이미지 맵 컨테이너 */
.image-map-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
/* 이미지 스타일링 */
.image-map-container img {
width: 100%;
height: auto;
border: 1px solid #ddd;
border-radius: 4px;
}
/* 호버 효과 */
.image-map-container area:hover {
cursor: pointer;
}