이미지에 버튼만들기
본문
이미지 내용이 표형식입니다.
http://대한민국애완곤충경진대회.com/경진대회-참가신청/
이사이트의 이미지와 비슷합니다. 그리고 이런 이미지의 특정칸에 버튼기능이 들어가야합니다. (참가/마감)
a나 button을 absolute로 올리니 반응형페이지라 계속 위치가 틀어집니다. 이미지를 html로 코딩하면 유지보수는 편하긴한데 거기까진 힘들것같고 좋은 방법이 없을까요?
답변 1
usemap 사용해서 해보세요.
style부분 php코드랑 섞어서 루프를 돌리던가 하고, 반응형은 아래 플러그인 사용하면 됩니다.
https://github.com/stowball/jQuery-rwdImageMaps?tab=readme-ov-file
<style>
map[name="test"] area{position:relative}
map[name="test"] area:nth-of-type(1):after{
content:'참가';
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
</style>
<map name="test">
<area shape="rect" coords="좌표" href="링크주소"/>
<area shape="rect" coords="좌표" href="링크주소"/>
<area shape="rect" coords="좌표" href="링크주소"/>
</map>
답변을 작성하시기 전에 로그인 해주세요.