웹디자인
이미지 클릭시 큰 이미지 팝업 뜨면서 보이도록 하는 소스
깽아네
2018. 12. 12. 15:55
728x90
안녕하세요. 오늘은 이미지 클릭시 이미지가 크게 팝업으로 뜨는 소스에 대해서 알려드리려고 해요.
<스크립트>
- <script>
- function doImgPop(img){
- img1= new Image();
- img1.src=(img);
- imgControll(img);
- }
- function imgControll(img){
- if((img1.width!=0)&&(img1.height!=0)){
- viewImage(img);
- }
- else{
- controller="imgControll('"+img+"')";
- intervalID=setTimeout(controller,20);
- }
- }
- function viewImage(img){
- W=img1.width;
- H=img1.height;
- O="width="+W+",height="+H+",scrollbars=yes";
- imgWin=window.open("","",O);
- imgWin.document.write("<html><head><title>확대보기</title></head>");
- imgWin.document.write("<body topmargin=0 leftmargin=0>");
- imgWin.document.write("<img src="+img+" onclick='self.close()' style='cursor:pointer;' title ='클릭하시면 창이 닫힙니다.'>");
- imgWin.document.close();
- }
- </script>
<html>
- <div class="acc01">
- <div class="acc_img"><img src="이미지경로" alt="이미지경로"></div>
- <div class="acc_tt">이미지경로</div>
- <span><img src="버튼이미지경로" alt="확대보기" style="cursor: pointer;" alt="" onclick="doImgPop('/images/multy_clip.jpg')"></span>
- </div>
<css>
- .acc01 {width:380px; height:487px; margin:30px 10px 20px; float:left; background:url("../images/acc_bg.png") no-repeat center center; position:relative;}
- .acc01 span {position:absolute; z-index:3; top:420px; left:120px; }
- .acc_img {width:370px; height:370px; position:absolute; z-index:3; top:0; left:0;}
- .acc_tt {color:#070000; font-size:20px; font-weight:bold; text-align:center; position:absolute; z-index:3; top:385px; left:50%; transform:translateX(-50%);}
728x90