전통적으로 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)