| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- spring
- STS
- myBatis
- JavaScript
- ubuntu
- PostgreSQL
- Open Source
- maven
- JDBC
- MySQL
- Exception
- Source
- oracle
- Core Java
- Thymeleaf
- Eclipse
- MSSQL
- SpringBoot
- 오픈소스
- jpa
- Docker
- 문서
- Spring Boot
- AJAX
- Tomcat
- 설정
- Python
- error
- IntelliJ
- git
- Today
- Total
헤르메스 LIFE
이미지 레이어 팝업(확대, 축소, 드래그) 본문
1185332997-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>
'JSP&JavaScript&HTML' 카테고리의 다른 글
| [jQuery] jQuery 기본 API (0) | 2011.06.15 |
|---|---|
| [예제] Pro Dropdown 메뉴 (0) | 2011.06.01 |
| [예제] 타이틀 고정 테이블 스크롤(Table Scroll) 예제 (0) | 2011.05.16 |
| 자바 스크립트 와 웹 접근성 - javascript accessibility (0) | 2011.05.03 |
| [Ajax] prototype.js를 위한 개발자 노트 - 1.5.0버전을 다룸 (0) | 2011.04.13 |
