전통적으로 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에서 이미지 및 사이즈 등은 임의로 적었습니다. 적용하려는 이미지에 맞게 수정하여 사용하면 됩니다.
Top comments (0)