Text Appears and then fades

[Total: 0    Average: 0/5]

This shows how to have text show up inside a table, and then fade out after time goes by.

Head Code:

<script>
var hex=255;              /* start at white                */
var fadeBy=17;            /* incremental/decremental value */
var ItemDescription;
var newWin = null;
var timeBetweenChanges=5; /* time in milliseconds          */
var fadeEvent=null;       /* no event to start with        */

function killEvent(e)
{
  if(e)
  {
    clearTimeout(e);
	return null;
  }
  return e;
}

function fadein()
{  
  if (hex>0)
  {
    hex-=fadeBy;
	document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")"; 
	fadeEvent=killEvent(fadeEvent);
    fadeEvent=setTimeout("fadein();",timeBetweenChanges);  
  }
} 
  
function fadeout()
{  
  if (hex<255)
  {
    hex+=fadeBy;
    document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")"; 
	fadeEvent=killEvent(fadeEvent);
    fadeEvent=setTimeout("fadeout()",timeBetweenChanges);
  }
}

function changetext(ItemDescription){
if (ItemDescription==1) {document.getElementById("sample").innerHTML="Dynamic Text Description One"; fadein();}; 
if (ItemDescription==2) {document.getElementById("sample").innerHTML="Second Spot Description"; fadein();}; 
if (ItemDescription==99) {fadeout();} 
} 

</script> 

Body Code:

<table width="500" border="1" cellspacing="1" cellpadding="2" height="500"> 
  <tr>  
    <td valign="top" width="300"><a onMouseOver="changetext(1)" onMouseOut="changetext(99)">Text One</a><BR><a onMouseOver="changetext(2)" onMouseOut="changetext(99)">Second Text</a></td>
    <td valign="top" width="200"><div id="sample">Place mouse over text on left for description to appear here.</div></td> 
  </tr>
</table> 

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *