이미지에 버튼만들기

이미지에 버튼만들기

QA

이미지에 버튼만들기

답변 1

본문

이미지 내용이 표형식입니다. 

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> 
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 773
© SIRSOFT
현재 페이지 제일 처음으로