테스트 사이트 - 개발 중인 베타 버전입니다

이미지에 버튼만들기 채택완료

셀토스 1년 전 조회 10,915

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

http://대한민국애완곤충경진대회.com/경진대회-참가신청/ 

이사이트의 이미지와 비슷합니다. 그리고 이런 이미지의  특정칸에 버튼기능이 들어가야합니다.  (참가/마감)

a나 button을 absolute로 올리니 반응형페이지라 계속 위치가 틀어집니다. 이미지를 html로 코딩하면 유지보수는 편하긴한데 거기까진 힘들것같고 좋은 방법이 없을까요?

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
세크티
1년 전

usemap 사용해서 해보세요.

style부분 php코드랑 섞어서 루프를 돌리던가 하고, 반응형은 아래 플러그인 사용하면 됩니다.

https://github.com/stowball/jQuery-rwdImageMaps?tab=readme-ov-file

</p>

<p><style></p>

<p>map[name="test"] area{position:relative}</p>

<p>map[name="test"] area:nth-of-type(1):after{</p>

<p>    content:'참가';</p>

<p>    position:absolute;</p>

<p>    left:50%;</p>

<p>    top:50%;</p>

<p>    transform:translate(-50%,-50%);</p>

<p>}</p>

<p></style></p>

<p> </p>

<p><map name="test"></p>

<p><area shape="rect" coords="좌표" href="링크주소"/>  </p>

<p><area shape="rect" coords="좌표" href="링크주소"/>  </p>

<p><area shape="rect" coords="좌표" href="링크주소"/>  </p>

<p></map> </p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인