HTML Image Map & CSS Image Map

전통적으로 HTML Image maps를 이용하여 이미지위에 클릭 가능한 영역을 만들었습니다. CSS를 이용하여 이미지 맵을 만들 수 있습니다.

1. HTML 태그를 이용한 이미지 맵

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<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="Cup of coffee" href="coffee.htm">
</map>

참조

2. CSS를 이용한 이미지 맵

HTML 코드

<div id="workmap">
<a href="https://365ok.co.kr" id="workmap1" alt="웹학교"></a>
<a href="https://sir.kr" id="workmap2" alt="냑"></a>
<a href="https://skin.fiance.co.kr" id="workmap3" alt="데모"></a>
</div>

CSS 코드

#workmap{
  background-image: url(../img/main.jpg);
  width: 950px;
  height: 634px;
  position: relative;
}

#workmap a {
  display: block;
  border: 0;
  position: absolute;
  text-decoration:none
}

#workmap a:hover {
  border: 0;
  text-decoration:none
}
a#workmap1 { width: 168px; height: 23px; left: 30px; top: 188px; }
a#workmap2 { width: 168px; height: 23px; left: 30px; top: 216px; }
a#workmap3 { width: 168px; height: 23px; left: 30px; top: 245px }

CSS에서 이미지 및 사이즈 등은 임의로 적었습니다. 적용하려는 이미지에 맞게 수정하여 사용하면 됩니다.

HTML강좌
CSS강좌