통 이미지에서 부분 클릭시 팝업창 열려서 내용나오게..
본문
안녕하세요 php 초보 질문드립니다~
보통 통 이미지에서 마우스로 부분을 클릭하여
해당 내용의 팝업창을 띄우려 합니다.
[ 통 이미지에서 1번영역 클릭시 1번 내용 / 2번 영역 클릭시 2번 내용팝업 ]
1. 이부분을 관리자에서 입력하고 싶은뎁... 이게 가능한지...
2. 방법을 어떻게 해야하는지...
맵키? 데이터? 부분을 사용하라는 말은 들은적 있는데
관련 툴 종류나 스킨이나 테마 있으면 말씀좀 부탁드릴게요.
답변 2
이미지맵을 사용하면 가능합니다.
<img src="이미지경로" usemap="#popup">
<map name="popup" id="popup">
<area shape="rect" coords="x1,y1,x2,y2" href="팝업1주소" target="_blank">
<area shape="rect" coords="x1,y1,x2,y2" href="팝업2주소" target="_blank">
</map>
일단 이미지맵에 대해서 이해를 하시고 (구글에서 html 이미지맵으로 검색해보세요)
각 area태그의 좌표를 관리자 환경설정에 여분필드를 사용하시면 되겠네요.
<img src="이미지경로" usemap="#popup">
<map name="popup" id="popup">
<area shape="rect" coords="<?php echo $config['cf_1']?>" href="팝업1주소" target="_blank">
<area shape="rect" coords="<?php echo $config['cf_2']?>" href="팝업2주소" target="_blank">
</map>
<script>
function popUp(url) {
window.open(url, "my", "top=10, left=10, width=600, height=400, status=no, menubar=no, toolbar=no, resizable=no");
}
</script>
<div style=width:400px;height:400px;padding:20px;background-image:url(https://blog.kakaocdn.net/dn/cMVe4H/btq5RuQIRfF/DkSPyZQhLMVpy26P86Sp40/img.jpg);box-sizing:border-box>
<div style=cursor:pointer;width:100px;height:100px;background-color:#ff000080 onclick="popUp('https://sir.kr')"></div>
<div style="cursor:pointer;width:200px;height:200px;background-color:#0000ff80;margin:60px 0px 0px 160px" onclick="popUp('https://naver.com')"></div>
</div>
http://www.mediaplayer.kr/main/bbs/html_editor.php 에서
좌측장에 코드 넣고 우측에서 결과보기로 확인하세요.
답변을 작성하시기 전에 로그인 해주세요.
