아래는 본 예제의 자바스크립트입니다. <html>
<head>
<title>해피CGI</title> <SCRIPT LANGUAGE="JavaScript">
var FadingObject = new Array();
var FadeRunning=false;
var FadeInterval=30; /*******************************************************************************/
/*** These are the simplest HEX/DEC conversion routines I could come up with ***/
/*** I have seen a lot of fade routines that seem to make this a ***/
/*** very complex task. I am sure somene else must've had this idea ***/
/*******************************************************************************/
var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
function dec2hex(dec)
{
return(hexDigit[dec>>4]+hexDigit[dec&15]);
}
function hex2dec(hex)
{
return(parseInt(hex,16))
}
/******************************************************************************************/ /***********************************************************
* Function : createFaderObject
*
* Parameters : theDiv - The name of the DIV in which to fade the text
* numSteps - The number of steps to use in the fade.
* startColor - The background colour of the page.
*
* Description : Creates an object that can hold the current
* state of the fade animation for a particular DIV
***********************************************************/
function createFaderObject(theDiv, numSteps, startColor)
{
if(!startColor)
startColor = "000000";
this.name = theDiv;
this.text = null;
this.color = "FFFFFF";
this.next_text = null;
this.next_color = null;
this.state = "OFF";
this.index = 0;
this.steps = numSteps;
this.r = hex2dec(startColor.slice(0,2));
this.g = hex2dec(startColor.slice(2,4));
this.b = hex2dec(startColor.slice(4,6));
} /***********************************************************
* Function : FadingText
*
* Parameters : theDiv - The name of the DIV in which to fade the text
* numSteps - The number of steps to use in the fade.
*
* Description : Library function to be called from the main HTML.
* Creates an object that can hold the current
* state of the fade animation for a particular DIV
***********************************************************/
function FadingText(theDiv, numSteps, startColor)
{
FadingObject[theDiv] = new createFaderObject(theDiv, numSteps, startColor);
}
/*****************************************************************
* Function : start_fading
*
* Description : If the FadeAnimation loop is not currently running
* then it is started.
*****************************************************************/
function start_fading()
{
if(!FadeRunning)
FadeAnimation();
}
/*****************************************************************
* Function : set_text
*
* Description : In the new W3C DOM model we need only set the text
* once, after that we can just change the colour
*****************************************************************/
function set_text(f)
{
if(navigator.appName.indexOf("Netscape") != -1
&& document.getElementById)
{
var theElement = document.getElementById(f.name);
var newRange = document.createRange();
newRange.setStartBefore(theElement);
var strFrag = newRange.createContextualFragment(f.text); while (theElement.hasChildNodes())
theElement.removeChild(theElement.lastChild);
theElement.appendChild(strFrag);
theElement.style.color="#"+f.startColor;
}
}
/*****************************************************************
*
* Function : getColor
*
* Parameters : f - the fade object for which to calculate the colour.
*
* Description: Calculates the color of the link depending on
* how far through the fade we are. *
*****************************************************************/
function getColor(f)
{
var r=hex2dec(f.color.slice(0,2));
var g=hex2dec(f.color.slice(2,4));
var b=hex2dec(f.color.slice(4,6)); r2= Math.floor(f.r+(f.index*(r-f.r))/(f.steps) + .5);
g2= Math.floor(f.g+(f.index*(g-f.g))/(f.steps) + .5);
b2= Math.floor(f.b+(f.index*(b-f.b))/(f.steps) + .5); return("#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2));
}
/*****************************************************************
*
* Function : setColor
*
* Parameters : fadeObj - The TextFader object to set
*
* Description: Gets the color of the text and writes it to
* the DIV.
*
*****************************************************************/
function setColor(fadeObj)
{
var theColor=getColor(fadeObj);
var str="<FONT COLOR="+ theColor + ">" + fadeObj.text + "</FONT>";
var theDiv=fadeObj.name;
//if IE 4+
if(document.all)
{
document.all[theDiv].innerHTML=str;
}
//else if NS 4
else if(document.layers)
{
document.nscontainer.document.layers[theDiv].document.write(str);
document.nscontainer.document.layers[theDiv].document.close();
}
//else if NS 6 (supports new DOM, may work in IE5) - see Website Abstraction for more info.
//http://www.wsabstract.com/javatutors/dynamiccontent4.shtml
else if (document.getElementById)
{
theElement = document.getElementById(theDiv);
theElement.style.color=theColor;
}
}
/*****************************************************************
*
* Function : fade_up
*
* Parameters : theDiv - The div in which to display the text
* newText - The text to display when faded in
* newColor- The color the text will be.
*
* Description: Depending on the current "state" of the fade
* this function will determine the new state and
* if neccessary, start the fade effect.
*
*****************************************************************/
function fade_up(theDiv, newText, newColor)
{
var f=FadingObject[theDiv]; if(newColor == null)
newColor="FFFFFF"; if(f.state == "OFF")
{
f.text = newText;
f.color = newColor;
f.state = "FADE_UP";
set_text(f);
start_fading();
}
else if( f.state == "FADE_UP_DOWN"
|| f.state == "FADE_DOWN"
|| f.state == "FADE_DOWN_UP")
{
if(newText == f.text)
f.state = "FADE_UP";
else
{
f.next_text = newText;
f.next_color = newColor;
f.state = "FADE_DOWN_UP";
}
}
}
/*****************************************************************
*
* Function : fade_down
*
* Parameters : theDiv - The div in which to display the text
*
* Description: Depending on the current "state" of the fade
* this function will determine the new state and
* if neccessary, start the fade effect.
*
*****************************************************************/
function fade_down(theDiv)
{
var f=FadingObject[theDiv]; if(f.state=="ON")
{
f.state="FADE_DOWN";
start_fading();
}
else if(f.state=="FADE_DOWN_UP")
{
f.state="FADE_DOWN";
f.next_text = null;
}
else if(f.state == "FADE_UP")
{
f.state="FADE_UP_DOWN";
}
}
/*******************************************************************
*
* Function : Animate
*
* Description : This function is based on the Animate function
* of animate.js (animated rollovers).
* Each fade object has a state. This function
* modifies each object and changes its state.
*****************************************************************/
function FadeAnimation()
{
FadeRunning = false;
for (var d in FadingObject)
{
var f=FadingObject[d]; if(f.state == "FADE_UP")
{
if(f.index < f.steps)
f.index++;
else
f.index = f.steps;
setColor(f); if(f.index == f.steps)
f.state="ON";
else
FadeRunning = true;
}
else if(f.state == "FADE_UP_DOWN")
{
if(f.index < f.steps)
f.index++;
else
f.index = f.steps;
setColor(f); if(f.index == f.steps)
f.state="FADE_DOWN";
FadeRunning = true;
}
else if(f.state == "FADE_DOWN")
{
if(f.index > 0)
f.index--;
else
f.index = 0;
setColor(f); if(f.index == 0)
f.state="OFF";
else
FadeRunning = true;
}
else if(f.state == "FADE_DOWN_UP")
{
if(f.index > 0)
f.index--;
else
f.index = 0;
setColor(f); if(f.index == 0)
{
f.text = f.next_text;
f.color = f.next_color;
f.next_text = null;
f.state ="FADE_UP";
set_text(f);
}
FadeRunning = true;
}
}
/*** Check to see if we need to animate any more frames. ***/
if(FadeRunning)
setTimeout("FadeAnimation()", FadeInterval); }
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
FadingText('fade1', 10,"FFFFFF");
FadeInterval=30;
</SCRIPT> </head>
<body> <table border=1>
<td>
<p><A HREF="http://www.happycgi.com" onMouseOver="fade_up('fade1','링크1을 클릭할때 나타나는 설명텍스트 1번입니다.','000000')" onMouseOut="fade_down('fade1')"><font style="font-size:11px;">링크 1</font></A>
<p><A HREF="http://www.happycgi.com" onMouseOver="fade_up('fade1','2번인데 말안해도 알겠죠?^^','000000')" onMouseOut="fade_down('fade1')"><font style="font-size:11px;">링크 2</font></A>
<p><A HREF="http://www.happycgi.com" onMouseOver="fade_up('fade1','3번이에열 괜찮은 쏘스입니다.','000000')" onMouseOut="fade_down('fade1')"><font style="font-size:11px;">링크 3</font></A> </td>
<td width=200> <script language="JavaScript1.2">
if (document.layers){
document.write('<ilayer name="nscontainer" width="100%" height="100">')
document.write('<layer name="fade1" width="100%" height="100">')
document.write('</layer></ilayer>')
}
else
document.write('<DIV ID="fade1"></DIV>') </script> </td>
</table>
|
