몇개의 함수로 이미지에 팝업보기 간편하게 하기
페이지 정보
작성자 서방님 댓글 0건 조회 136회 작성일 06-09-20 17:55본문
이미지를 클릭하면 이미지가 팝업으로 크게 떠서 보이고 그 이미지 클릭하면 닫히게 많이 한다.
요게 이미지가 많아지면 이미지에 클릭하는 함수 줘야하고..팝업하는 부분 처리해야하고 이리저리 귀찮은점 많다.
그래서..아래 함수만 추가해주면 특정 폴더나 특정이름이 들어간 이미지는 자동으로 링크 만들어주고 팝업까지 해준다.
참고로 imageOpen함수의 "이미지크게보기" 부분은 phpschool의 팁에서 가져온것이다.
http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=44057&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%C0%CC%B9%CC%C1%F6&sop=and
해서..imageOpen부분은 나한테 물어보지 말아라.. -_- 그 외의 코드만 질문받음!
정리되지 않은 소스는 아래와 같다. (지금 만드는 웹페이지에서 그냥 긁어다 놓은것이다..팁용으로 깔끔하게 정리는 안해두었음)
<script language=javascript>
var imagepath;
function imageOpen() {
if (imagepath != "") {
//open(imagepath);
var img_view = imagepath;
var x = x + 20 ;
var y = y + 30 ;
htmlz = "<html><head><title>이미지크게보기</title><style>body{margin:0;cursor:hand;}</style></head><body scroll=auto onload='width1=document.all.Timage.width;if(width1>1024)width1=1024;height1=document.all.Timage.height;if(height1>768)height1=768;top.window.resizeTo(width1+30,height1+54);' onclick='top.window.close();'><img src='"+img_view+"' title='클릭하시면 닫힙니다.' name='Timage' id='Timage'></body></html>"
imagez = window.open('', "image", "width="+ 100 +", height="+ 100 +", top=0,left=0,scrollbars=auto,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=1");
imagez.document.open();
imagez.document.write(htmlz)
imagez.document.close();
}
}
function window.document.onmouseover() {
var r, re;
re = /photo/i; // 보여줄 폴더 설정한다.
var srcEl = event.srcElement;
if( srcEl==null ) return;
if(typeof(srcEl.src) != "undefined" ) {
r = (srcEl.src).search(re);
if (r > -1 && srcEl.src != "") {
imagepath = srcEl.src;
srcEl.style.cursor = "hand";
srcEl.onclick=imageOpen;
}
} else {
imagepath = "";
}
}
</script>
imageOpen 함수의 끝부분에 imagez.focus(); 넣어주면 효과만점!
댓글목록
등록된 댓글이 없습니다.
