이미지 갤러리
페이지 정보
작성자 서방님 댓글 0건 조회 72회 작성일 07-08-11 16:22본문
<html>
<head>
<title>http://www.blueb.co.kr</title>
<style type="text/css">
#screen span {
position:absolute;
overflow:hidden;
border:#FFF solid 1px;
background:#FFF;
}
#screen img{
position:absolute;
left:-9999px;
top:-9999px;
cursor: pointer;
}
#caption, #title{
color: #000;
font-family: georgia, 'times new roman', times, veronica, serif;
font-size: 1em;
text-align: center;
}
#caption b {
font-size: 2em;
}
</style>
<script type="text/javascript">
<!--
//
window.onerror = new Function("return true");
var obj = [];
var scr;
var spa;
var img;
var W;
var Wi;
var Hi;
var wi;
var hi;
var Sx;
var Sy;
var M;
var xm;
var ym;
var xb = 0;
var yb = 0;
var ob = - 1;
var cl = false;
/* needed in standard mode */
px = function(x)
{
return Math.round(x) + "px";
}
/* center image - do not resize for perf. reason */
img_center = function(o)
{
with(img[o])
{
style.left = px( - (width - Wi) / 2);
style.top = px( - (height - Hi) / 2);
}
}
//////////////////////////////////////////////////////////
var Nx = 4; //size grid x
var Ny = 4; //size grid y
var Tx = 3; // image width
var Ty = 3; // image height
var Mg = 40; // margin
var SP = 1; // speed
//////////////////////////////////////////////////////////
function Cobj(o, x, y)
{
this.o = o;
this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));
this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));
this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;
this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;
this.l = 0;
this.t = 0;
this.w = 0;
this.h = 0;
this.s = 0;
this.mv = false;
this.spa = spa[o].style;
this.img = img[o];
this.txt = img[o].alt;
img[o].alt = "";
/* zooming loop */
this.zoom = function()
{
with(this)
{
l += li * s;
t += ti * s;
w += wi * s;
h += hi * s;
if ((s > 0 && w < Wi) || (s < 0 && w > Sx))
{
/* force window.event */
window.focus();
/* loop */
setTimeout("obj[" + o + "].zoom()", 16);
}
else
{
/* finished */
mv = false;
/* set final position */
if (s > 0)
{
l = ix * M + ix * Sx;
t = iy * M + iy * Sy;
w = Wi;
h = Hi;
}
else
{
l = x * M + x * Sx;
t = y * M + y * Sy;
w = Sx;
h = Sy;
}
}
/* html animation */
with(spa)
{
left = px(l);
top = px(t);
width = px(w);
height = px(h);
zIndex = Math.round(w);
}
}
}
this.click = function()
{
with(this)
{
img_center(o);
/* zooming logic */
if ( ! mv || cl)
{
if (s > 0)
{
if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4)
{
s = - 2;
mv = true;
zoom();
cap.innerHTML = txt;
}
}
else
{
if (cl || ob != o)
{
if (ob >= 0)
{
with(obj[ob])
{
s = - 2;
mv = true;
zoom();
}
}
ob = o;
s = 1;
xb = xm;
yb = ym;
mv = true;
zoom();
cap.innerHTML = txt;
}
}
}
}
}
/* hook up events */
img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()");
img[o].onclick = new Function("cl=true;obj[" + o + "].click()");
img[o].onload = new Function("img_center(" + o + ")");
/* initial display */
this.zoom();
}
/* mouse */
document.onmousemove = function(e)
{
if ( ! e)
{
e = window.event;
}
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
}
/* init */
function load()
{
/* html elements */
scr = document.getElementById("screen");
spa = scr.getElementsByTagName("span");
img = scr.getElementsByTagName("img");
cap = document.getElementById("caption");
/* mouseover border */
document.getElementById("border").onmouseover = function()
{
cl = true;
if(ob >= 0 && obj[ob].s > 0) obj[ob].click();
ob = -1;
}
/* global variables */
W = parseInt(scr.style.width);
H = parseInt(scr.style.height);
M = W / Mg;
Sx = (W - (Nx - 1) * M) / Nx;
Sy = (H - (Ny - 1) * M) / Ny;
Wi = Tx * Sx + (Tx - 1) * M;
Hi = Ty * Sy + (Ty - 1) * M;
SP = M * Tx * SP;
wi = (Wi - Sx) / SP;
hi = (Hi - Sy) / SP;
/* create objects */
for (k = 0, i = 0; i < Nx; i ++)
{
for (j = 0; j < Ny; j ++)
{
obj[k] = new Cobj(k ++, i, j);
}
}
}
//-->
</script>
</head>
<body>
<div style="position:absolute;left:50%;top:50%">
<div id="title" style="position:absolute;width:440px;height:40px;left:-220px;top:-200px"></div>
<div id="border" style="position:absolute;width:440px;height:340px;left:-220px;top:-170px;background:#000;border:#555 solid 1px"></div>
<div id="screen" style="position:absolute;width:400px;height:300px;left:-200px;top:-150px;background:#000">
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/6.jpg" alt="one day in <b>early</b> autumn"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/2.jpg" alt="detailing the raw <b>material</b>"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/3.jpg" alt="Waiting for the right <b>moment</b>"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/4.jpg" alt="<b>carefully</b> weight the options"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/5.jpg" alt="go <b>ahead</b>, I told myself"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/1.jpg" alt="Put <b>faith</b> to work"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/7.jpg" alt="<b>rough</b> tension"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/18.jpg" alt="mensuration, <b>prior</b> to meditation"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/8.jpg" alt="taking a break <b>too</b> long"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/10.jpg" alt="open to a <b>deep</b> breath, too"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/12.jpg" alt="I fell for <b>you</b>"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/17.jpg" alt="Paradise could be <b>beneath</b>"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/14.jpg" alt="<b>transmission</b>, essential"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/15.jpg" alt="little, hardly any <b>nuance</b>"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/16.jpg" alt="ends <b>meet</b> through thick and thin"></span>
<span><img src="http://www.blueb.co.kr/SRC/javascript/image/photo/09.jpg" alt="I shall <b>resist</b>"></span>
</div>
<div id="caption" style="position:absolute;width:440px;height:60px;left:-220px;top:175px">- mouseOver - </div>
</div>
<script type="text/javascript">
<!--
// starter
load();
//-->
</script>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
