이미지에 버튼만들기

이미지에 버튼만들기

QA

이미지에 버튼만들기

본문

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

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> 
답변을 작성하시기 전에 로그인 해주세요.
전체 136
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT