하나의 이미지로 롤오버 효과를 느끼게 할 수 있는 스크립트 입니다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=euc-kr">
<TITLE> Script </TITLE>
<!---- [1단계] 아래의 스크립트를 HEAD 부분에 복사 해 넣으세요 ----->
<SCRIPT LANGUAGE="JavaScript">
<!--
if(!window.myButton)
myButton=new Object();
myButton.ImageZoomRunning = false;
myButton.zoomStretch = "BOTH"; //"HORIZONTAL", "VERTICAL"
myButton.zoomIn = function(img, zoomStep, maxZoom)
{
if(img)
{
if(!zoomStep)
{
if(myButton.zoomStretch == "VERTICAL")
zoomStep = img.height/10;
else
zoomStep = img.width/10;
}
if(!maxZoom)
{
if(myButton.zoomStretch == "VERTICAL")
maxZoom = img.height/2;
else
maxZoom = img.width/2;
}
if(img.state == null)
{
img.state = "OFF";
img.index = 0;
img.orgWidth = img.width;
img.orgHeight = img.height;
img.zoomStep = zoomStep;
img.maxZoom = maxZoom;
}
if(img.state == "OFF")
{
img.state = "ZOOM_IN";
start_zooming();
}
else if( img.state == "ZOOM_IN_OUT"
|| img.state == "ZOOM_OUT")
{
img.state = "ZOOM_IN";
}
}
}
myButton.zoomOut = function(img)
{
if(img)
{
if(img.state=="ON")
{
img.state="ZOOM_OUT";
start_zooming();
}
else if(img.state == "ZOOM_IN")
{
img.state="ZOOM_IN_OUT";
}
}
}
function start_zooming()
{
if(!myButton.ImageZoomRunning)
ImageZoomAnimation();
}
myButton.setZoom = function(img)
{
if(myButton.zoomStretch == "HORIZONTAL")
{
img.width = img.orgWidth + img.index;
img.height = img.orgHeight;
}
else if(myButton.zoomStretch == "VERTICAL")
{
img.width = img.orgWidth;
img.height = img.orgHeight + img.index;
}
else
{
img.width = img.orgWidth + img.index;
}
}
function ImageZoomAnimation()
{
myButton.ImageZoomRunning = false;
for(i=0 ; i<document.images.length ; i++)
{
var img = document.images[i];
if(img.state)
{
if(img.state == "ZOOM_IN")
{
if(img.index < img.maxZoom)
img.index+=img.zoomStep;
else
img.index = img.maxZoom;
myButton.setZoom(img);
if(img.index == img.maxZoom)
img.state="ON";
else
myButton.ImageZoomRunning = true;
}
else if(img.state == "ZOOM_IN_OUT")
{
if(img.index < img.maxZoom)
img.index+=img.zoomStep;
else
img.index = img.maxZoom;
myButton.setZoom(img);
if(img.index == img.maxZoom)
img.state="ZOOM_OUT";
myButton.ImageZoomRunning = true;
}
else if(img.state == "ZOOM_OUT")
{
if(img.index > 0)
img.index-=img.zoomStep;
else
img.index = 0;
myButton.setZoom(img);
if(img.index == 0)
img.state="OFF";
else
myButton.ImageZoomRunning = true;
}
}
}
if(myButton.ImageZoomRunning)
setTimeout("ImageZoomAnimation()", 40);
}
//-->
</SCRIPT>
<SCRIPT>
myButton.zoomStretch = "HORIZONTAL";
</script>
<!-------------- 여기까지 ---------------->
</head>
<body>
<!---- [2단계] BODY 부분에 아래와 같은 방법으로 태그와 코드를 복사 해 넣으세요 --->
<table align="center" width="180" cellspacing="0" cellpadding="0">
<tr>
<td align="center" width="300">
<A HREF="#"><img src="../230-33-1.gif" border="0"
onMouseOver="myButton.zoomIn(this)" onMouseOut="myButton.zoomOut(this)"></a></td>
</tr>
<tr>
<td align="center" width="300">
<A HREF="#"><img src="../230-33-2.gif" border="0"
onMouseOver="myButton.zoomIn(this)" onMouseOut="myButton.zoomOut(this)"></a></td>
</tr>
<tr>
<td align="center" width="300">
<A HREF="#"><img src="../230-33-3.gif" border="0"
onMouseOver="myButton.zoomIn(this)" onMouseOut="myButton.zoomOut(this)"></a></td>
</tr>
<tr>
<td align="center" width="300">
<A HREF="#"><img src="../230-33-4.gif" border="0"
onMouseOver="myButton.zoomIn(this)" onMouseOut="myButton.zoomOut(this)"></a></td>
</tr>
</table>
<!-------------- 여기까지 ---------------->
</body>
</html>