img_zoom_drag.zip썸네일을 클릭하면 레이어 팝업형태로 이미지를 띄웁니다.
팝업은 드래그 가능하며.. 팝업 오른쪽 하단 귀퉁이를 잡고 드래그 하면 확대,축소가 가능합니다.(페이지가 리프레쉬 될때까지는 다른 이미지를 클릭해도 확대 및 축소된 상태를 기억합니다.)
상단 타이틀바에 있는 +,-버튼을 이용하여 확대,축소 가능하고 X를 누르면 닫힙니다.
테마 설정방법은 아래 스크립트에 다음과 같은 옵션을 줄 수 있습니다.
var puTheme= "gray" ; //테마설정
옵션종류 : gray, blue, navy, black, brick, pink, brown, olive, linen
<html>
<head>
<title>해피CGI</title>
<script language="JavaScript1.2">
var puCopyright= "COPYRIGHT ⓒ 2004 - 2007 BLUE-B. ALL RIGHTS RESERVED." ; //하단 카피라이트 문장
var puTheme= "gray" ; //테마설정
var imgpreview= "이미지 팝업뷰" ; //타이틀바 제목
</script>
</head>
<body>
<div style="display:none">popvu</div>
<script language="JavaScript1.2" src="photo_popup.js"></script>
<b>각각의 썸네일 이미지를 클릭해보세요.</b><p>
<a href="image/Photo02.jpg" title="치즈케익" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo02.jpg" border=0 width="100"></a>
<a href="image/Photo05.jpg" title="My BMW" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo05.jpg" border=0 width="100"></a>
<a href="image/Photo06.jpg" title="베스보트" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo06.jpg" border=0 width="100"></a>
<a href="image/Photo07.jpg" title="귀여운 작은 술병들" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo07.jpg" border=0 width="100"></a>
<a href="image/Photo08.jpg" title="곡성기차마을" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo08.jpg" border=0 width="100"></a>
<a href="image/Photo09.jpg" title="소나무" onclick="puShow(this.title, this.href); return false;" ><img src="image/Photo09.jpg" border=0 width="100"></a>
</body>
</html>
'WEB > HTML/Css/Script' 카테고리의 다른 글
| 긴문장을 줄이고 끝에 more를 넣는 스타일 생성 (0) | 2007/09/25 |
|---|---|
| 단어 더블 클릭시 네이버 검색 기능 (0) | 2007/09/25 |
| 이미지 팝업 레이어(확대/축소/드래그) (0) | 2007/08/16 |
| 폼 툴팁 (0) | 2007/08/16 |
| 셀렉트 메뉴목록을 다른 셀렉트로 이동 (0) | 2007/08/16 |
| CSS 예제 사이트 모음 (0) | 2007/07/28 |
WEB/HTML/Css/Script
최근에 달린 댓글
링크
최근에 받은 트랙백
태그목록