웹마스터 팁
요청해오신 레이어 무조건 중앙에 열리기 와 클릭하는 곳에 열리기 두가지 소스입니다.
2003.02.25 07:31
소스가 너무 길어지기 때문에 답변으로 대신합니다.
일단 아래 예제들을 실행하기 위해서는 소스 제일 아래 있는 div 에서 left와 top을 지워져야 합니다.
그리고 이 소스는 익스 전용입니다.넷스에서는 틀려 집니다.
1.클릭 하는 곳에 열리기
---------------------------------------------------------------------------------------------------------------
<script language=javascript>
var x =0
var y=0
drag = 0
move = 0
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
function ShowImg(file_name)
{
var file_name;
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
img_layer.innerHTML="<table cellpadding=0 cellspacing=0 border=0 onclick=HideImg()><tr><Td bgcolor=#006699 height=20><font face=verdana size=1 color=#ffffff> SHOW IMAGE</font></td></tr><tr><td><img src=" + file_name + " border=0 alt='클릭하면 닫힙니다'></td></tr></table>";
//추가 부분 시작
layer_x=event.clientX;
layer_y=event.clientY;
img_layer.style.pixelLeft=layer_x + document.body.scrollLeft;
img_layer.style.pixelTop=layer_y + document.body.scrollTop-presctop;
//추가 부분 끝
//간단히 설명드리면 마우스의 이벤트의 좌표 값과 스크롤바가 있을 경우 스크롤바의 위치값을 더해 클릭한곳에
//열리게 하는 것입니다.
}
function HideImg()
{
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "hidden";
img_layer.filters.blendTrans.play();
}
function mouseUp() {
move = 0
}
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(img_layer.style.left)
clicktop = window.event.y - parseInt(img_layer.style.top)
img_layer.style.zIndex += 1
move = 1
}
}
function mouseMove() {
if (move) {
img_layer.style.left = window.event.x - clickleft
img_layer.style.top = window.event.y - clicktop
}
}
function mouseStop() {
window.event.returnValue = false
}
</script>
<table>
<tr>
<td><a href=javascript:ShowImg('img/1.jpg') onfocus=blur()><img src=img/1.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/2.jpg') onfocus=blur()><img src=img/2.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/3.jpg') onfocus=blur()><img src=img/3.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/4.jpg') onfocus=blur()><img src=img/4.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/5.jpg') onfocus=blur()><img src=img/5.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/6.jpg') onfocus=blur()><img src=img/6.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/7.jpg') onfocus=blur()><img src=img/7.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/8.jpg') onfocus=blur()><img src=img/8.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/9.jpg') onfocus=blur()><img src=img/9.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/10.jpg') onfocus=blur()><img src=img/10.jpg border=0 width=120 height=120></a></td>
</tr>
</table>
<div id=img_layer style="position:absolute; z-index:2; visibility:hidden; filter:revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5);" onmouseover="drag=1;move=0" onmouseout="drag=0"></div>
------------------------------------------------------------------------------------------------------
2. 항상 중앙에 레이어 열리게 하기
테스트 해본결롸 썩 잘됩니다.
<script language=javascript>
var x =0
var y=0
drag = 0
move = 0
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
function ShowImg(file_name)
{
var file_name;
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
img_layer.innerHTML="<table cellpadding=0 cellspacing=0 border=0 onclick=HideImg()><tr><Td bgcolor=#006699 height=20><font face=verdana size=1 color=#ffffff> SHOW IMAGE</font></td></tr><tr><td><img src=" + file_name + " border=0 alt='클릭하면 닫힙니다'></td></tr></table>";
//추가 부분 시작
layer_x = parseInt(document.body.clientWidth / 2 / 2) + document.body.scrollLeft;
layer_y = parseInt(document.body.clientHeight / 2 / 2)+ document.body.scrollTop;
img_layer.style.pixelLeft=layer_x;
img_layer.style.pixelTop=layer_y;
//추가 부분 끝
//역시 비슷한 원리로 익스 창의 크기를 구해와 중앙에 중앙을 구하고 스크롤된 값을 더합니다.
//위 소스의 경우 열리는 이미지 크기에 따라 약간의 변화가 있겠네요.
}
function HideImg()
{
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "hidden";
img_layer.filters.blendTrans.play();
}
function mouseUp() {
move = 0
}
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(img_layer.style.left)
clicktop = window.event.y - parseInt(img_layer.style.top)
img_layer.style.zIndex += 1
move = 1
}
}
function mouseMove() {
if (move) {
img_layer.style.left = window.event.x - clickleft
img_layer.style.top = window.event.y - clicktop
}
}
function mouseStop() {
window.event.returnValue = false
}
</script>
<table>
<tr>
<td><a href=javascript:ShowImg('img/1.jpg') onfocus=blur()><img src=img/1.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/2.jpg') onfocus=blur()><img src=img/2.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/3.jpg') onfocus=blur()><img src=img/3.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/4.jpg') onfocus=blur()><img src=img/4.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/5.jpg') onfocus=blur()><img src=img/5.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/6.jpg') onfocus=blur()><img src=img/6.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/7.jpg') onfocus=blur()><img src=img/7.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/8.jpg') onfocus=blur()><img src=img/8.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/9.jpg') onfocus=blur()><img src=img/9.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/10.jpg') onfocus=blur()><img src=img/10.jpg border=0 width=120 height=120></a></td>
</tr>
</table>
<div id=img_layer style="position:absolute; z-index:2; visibility:hidden; filter:revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5);" onmouseover="drag=1;move=0" onmouseout="drag=0"></div>
------------------------------------------------------------------------------------------------------
위 스크립트를 기본으로하는 갤러리를 베포 중입니다.
nzeo 다운로드에 php 자료실을 이용해 주셔도 되구요.
아니면 http://morami.net/d_m/mg/index.html 로 오시면 자세히 아실 수 있습니다.
많은 관심 부탁드립니다. ^^
그럼 이만 모라미는 자야 해서요..
일단 아래 예제들을 실행하기 위해서는 소스 제일 아래 있는 div 에서 left와 top을 지워져야 합니다.
그리고 이 소스는 익스 전용입니다.넷스에서는 틀려 집니다.
1.클릭 하는 곳에 열리기
---------------------------------------------------------------------------------------------------------------
<script language=javascript>
var x =0
var y=0
drag = 0
move = 0
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
function ShowImg(file_name)
{
var file_name;
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
img_layer.innerHTML="<table cellpadding=0 cellspacing=0 border=0 onclick=HideImg()><tr><Td bgcolor=#006699 height=20><font face=verdana size=1 color=#ffffff> SHOW IMAGE</font></td></tr><tr><td><img src=" + file_name + " border=0 alt='클릭하면 닫힙니다'></td></tr></table>";
//추가 부분 시작
layer_x=event.clientX;
layer_y=event.clientY;
img_layer.style.pixelLeft=layer_x + document.body.scrollLeft;
img_layer.style.pixelTop=layer_y + document.body.scrollTop-presctop;
//추가 부분 끝
//간단히 설명드리면 마우스의 이벤트의 좌표 값과 스크롤바가 있을 경우 스크롤바의 위치값을 더해 클릭한곳에
//열리게 하는 것입니다.
}
function HideImg()
{
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "hidden";
img_layer.filters.blendTrans.play();
}
function mouseUp() {
move = 0
}
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(img_layer.style.left)
clicktop = window.event.y - parseInt(img_layer.style.top)
img_layer.style.zIndex += 1
move = 1
}
}
function mouseMove() {
if (move) {
img_layer.style.left = window.event.x - clickleft
img_layer.style.top = window.event.y - clicktop
}
}
function mouseStop() {
window.event.returnValue = false
}
</script>
<table>
<tr>
<td><a href=javascript:ShowImg('img/1.jpg') onfocus=blur()><img src=img/1.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/2.jpg') onfocus=blur()><img src=img/2.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/3.jpg') onfocus=blur()><img src=img/3.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/4.jpg') onfocus=blur()><img src=img/4.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/5.jpg') onfocus=blur()><img src=img/5.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/6.jpg') onfocus=blur()><img src=img/6.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/7.jpg') onfocus=blur()><img src=img/7.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/8.jpg') onfocus=blur()><img src=img/8.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/9.jpg') onfocus=blur()><img src=img/9.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/10.jpg') onfocus=blur()><img src=img/10.jpg border=0 width=120 height=120></a></td>
</tr>
</table>
<div id=img_layer style="position:absolute; z-index:2; visibility:hidden; filter:revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5);" onmouseover="drag=1;move=0" onmouseout="drag=0"></div>
------------------------------------------------------------------------------------------------------
2. 항상 중앙에 레이어 열리게 하기
테스트 해본결롸 썩 잘됩니다.
<script language=javascript>
var x =0
var y=0
drag = 0
move = 0
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
function ShowImg(file_name)
{
var file_name;
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "visible";
img_layer.filters.blendTrans.play();
img_layer.innerHTML="<table cellpadding=0 cellspacing=0 border=0 onclick=HideImg()><tr><Td bgcolor=#006699 height=20><font face=verdana size=1 color=#ffffff> SHOW IMAGE</font></td></tr><tr><td><img src=" + file_name + " border=0 alt='클릭하면 닫힙니다'></td></tr></table>";
//추가 부분 시작
layer_x = parseInt(document.body.clientWidth / 2 / 2) + document.body.scrollLeft;
layer_y = parseInt(document.body.clientHeight / 2 / 2)+ document.body.scrollTop;
img_layer.style.pixelLeft=layer_x;
img_layer.style.pixelTop=layer_y;
//추가 부분 끝
//역시 비슷한 원리로 익스 창의 크기를 구해와 중앙에 중앙을 구하고 스크롤된 값을 더합니다.
//위 소스의 경우 열리는 이미지 크기에 따라 약간의 변화가 있겠네요.
}
function HideImg()
{
img_layer.filters.blendTrans.apply();
img_layer.style.visibility = "hidden";
img_layer.filters.blendTrans.play();
}
function mouseUp() {
move = 0
}
function mouseDown() {
if (drag) {
clickleft = window.event.x - parseInt(img_layer.style.left)
clicktop = window.event.y - parseInt(img_layer.style.top)
img_layer.style.zIndex += 1
move = 1
}
}
function mouseMove() {
if (move) {
img_layer.style.left = window.event.x - clickleft
img_layer.style.top = window.event.y - clicktop
}
}
function mouseStop() {
window.event.returnValue = false
}
</script>
<table>
<tr>
<td><a href=javascript:ShowImg('img/1.jpg') onfocus=blur()><img src=img/1.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/2.jpg') onfocus=blur()><img src=img/2.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/3.jpg') onfocus=blur()><img src=img/3.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/4.jpg') onfocus=blur()><img src=img/4.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/5.jpg') onfocus=blur()><img src=img/5.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/6.jpg') onfocus=blur()><img src=img/6.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/7.jpg') onfocus=blur()><img src=img/7.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/8.jpg') onfocus=blur()><img src=img/8.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('img/9.jpg') onfocus=blur()><img src=img/9.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('img/10.jpg') onfocus=blur()><img src=img/10.jpg border=0 width=120 height=120></a></td>
</tr>
</table>
<div id=img_layer style="position:absolute; z-index:2; visibility:hidden; filter:revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5);" onmouseover="drag=1;move=0" onmouseout="drag=0"></div>
------------------------------------------------------------------------------------------------------
위 스크립트를 기본으로하는 갤러리를 베포 중입니다.
nzeo 다운로드에 php 자료실을 이용해 주셔도 되구요.
아니면 http://morami.net/d_m/mg/index.html 로 오시면 자세히 아실 수 있습니다.
많은 관심 부탁드립니다. ^^
그럼 이만 모라미는 자야 해서요..
댓글 4
-
영혼
2003.02.25 11:26
-
Vichara
2003.02.26 00:48
태클은 아니지만 이거보다 소스 짧게해서 하는방법 있는데.. -
Vichara
2003.02.26 00:48
물론 취향대로 쓰세요 -
모라미
2003.02.27 00:49
영혼님 뭐 ^^; 별말씀을요. 이거 만들고 잤습니다. 후후
그리고 소스를 더 짧게 한다구요..??!! 이거는 간단히 짠건데 더 졍교 하게 짜려면 이미지
사이즈 등등을 체크한후...암튼 더 길어 질법한데요..
네~~ 취향대로 쓰세요..-.-
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
APM에서 XE 설치시 깨짐현상 발생될때...
 | 비밀M | 2013.05.14 |
| 파일박스 사용에 관하여 [2] | wooildang | 2013.04.26 |
| 이미지 리사이즈 적용이 안되는 경우 [4] | 아고라 | 2009.06.30 |
|
[수정] CSS, JS 파일 gzip로 한꺼번에 압축해서 전송하기
[20]
| SCAC | 2011.09.02 |
| 모바일에서 댓글 자동 펼치기 (스킨:스케치북5모바일) [2] | 준스타일 | 2013.05.03 |
| array 함수와 in_array함수 이용한 시간 체크 | 똑디 | 2013.05.03 |
|
상담용 게시판 - 확장 변수 이용
[4]
| 어라얼랑 | 2012.06.23 |
| XE를 위한 DEBUG 이야기 [3] | 우진홈 | 2013.04.30 |
| xe 속도 엄청 빨라집니다. [4] | 투투투쓰리 | 2013.03.12 |
| 최근게시물에 움직이는 GIF 불러오기 | SuP | 2013.04.25 |
| 개인서버나 호스팅운영하실분들 참고하세요 [6] | 데브위트™ | 2012.06.19 |
| 간단한 PHP 문법 [204] | zero | 2000.03.06 |
| XE 1.5.X , 1.7.X 용 nginx rewrite [4] | Root | 2013.03.24 |
| 메뉴에 새글 표시 모듈이 작동하지 않은 문제 해결 [2] | 샹하이 | 2013.04.15 |
|
meta_add 애드온 수정.(1.7.3 버전에 맞게..)
[4]
| 투씨 | 2013.04.01 |
| 메인화면에 플래시 쉽게 삽입하는 방법.. [12] | 청개구리00 | 2008.08.30 |
| 스팸공동대응 api 모듈 지우기 [1] | SCAC | 2012.08.12 |
| xe1.7.3.1 으로의 업데이트시 팝업모듈 오류 수정내역 [1] | 날마다좋은날 | 2013.04.12 |
| 제로보드 xe 게시판 가로 푹 줄이기 방법좀 알려주세요. [1] | 산업일꾼 | 2013.04.14 |
|
아이콘샵(v0.4) 관리자페이지 디자인수정파일(1.7.x 용)
| 카이네드 | 2013.04.13 |
잘 쓸께요^^
근데 님 안주무세여?ㅡㅡ;;;;