통 이미지에서 부분 클릭시 팝업창 열려서 내용나오게..

통 이미지에서 부분 클릭시 팝업창 열려서 내용나오게..

QA

통 이미지에서 부분 클릭시 팝업창 열려서 내용나오게..

본문

안녕하세요 php 초보 질문드립니다~

 

보통 통 이미지에서 마우스로 부분을 클릭하여

해당 내용의 팝업창을 띄우려 합니다.

 

990518856_1649814412.2268.png 

 [ 통 이미지에서 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 에서

좌측장에 코드 넣고 우측에서 결과보기로 확인하세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 773
QA 내용 검색

회원로그인

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