이미지 갤러리 효과
작성일 07-08-11 15:49
페이지 정보
작성자서방님 조회 378회 댓글 0건본문
<HTML>
<HEAD>
<TITLE>BLUEB</TITLE>
<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=#000000 height=20 align=center><font face=verdana size=1 color=#ffffff> DRAG !!</font></td></tr><tr><td><img src=" + file_name + " border=0 alt='클릭하면 닫힙니다'></td></tr></table>";
}
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>
</HEAD>
<BODY>
<table>
<tr>
<td><a href=javascript:ShowImg('http://www.blueb.co.kr/SRC/javascript/image/img01.jpg') onfocus=blur()><img src="http://www.blueb.co.kr/SRC/javascript/image/img01.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('http://www.blueb.co.kr/SRC/javascript/image/img02.jpg') onfocus=blur()><img src="http://www.blueb.co.kr/SRC/javascript/image/img02.jpg border=0 width=120 height=120></a></td>
</tr>
<tr>
<td><a href=javascript:ShowImg('http://www.blueb.co.kr/SRC/javascript/image/img03.jpg') onfocus=blur()><img src="http://www.blueb.co.kr/SRC/javascript/image/img03.jpg border=0 width=120 height=120></a></td>
<td><a href=javascript:ShowImg('http://www.blueb.co.kr/SRC/javascript/image/test.jpg') onfocus=blur()><img src="http://www.blueb.co.kr/SRC/javascript/image/test.jpg border=0 width=120 height=120></a></td>
</tr>
</table>
<div id=img_layer style="position:absolute; left:20px; top:30px; 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>
이미지를 클릭하면 해당이미지가 페이드인되면서 실사이즈로 디스플레이 되고
다시한번 클릭하면 사라집니다.
댓글목록
등록된 댓글이 없습니다.