Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How you can create Dynamic Fading Links in your Web Application.

Author: DevASP
Download Source Code : 598_NavigationalLinks.zip

This article is about how you can create dynamic fading links in your web application. When you take mouse over the link it starts fading.

 

Steps you will do.

 

Start visual studio and create a new web application.

 

Open the HTML design of your web page and add the following JavaScript code and style tag before closing the head tag.

 

 

<script language="JavaScript" type="text/javascript">  

var a=new Array();

 

var colorCount=0,bgcolorCount=255;

 

var Timer;

 

window.onload=load;

 

function load()

 

{

 

  a=document.getElementById('container').getElementsByTagName('a');

 

}

 

function LoadAll(arrayID)

 

{

 

 if(colorCount<255||bgcolorCount>0)

 

 {

 

  with(a[arrayID].style)

 

            {

 

color="rgb("+colorCount+","+colorCount+","+colorCount+")";

border="2 white outset";

backgroundColor="rgb("+bgcolorCount+","+bgcolorCount+","+bgcolorCount+")";

 

            }

 

            colorCount+=4;

            bgcolorCount-=4;

 

 }

 

 Timer=setTimeout("LoadAll("+arrayID+");",10);

 

}

 

function OMOver(arrayID)

{

  clearTimeout(Timer);

  bgcolorCount=255;

  colorCount=0;

  LoadAll(arrayID);

}

 

function OMOut(arrayID)

 

{

 

  bgcolorCount=0;

 

  colorCount=255;

 

  with(a[arrayID].style)

 

            {

 

              color="lightyellow";

              border="0";

              backgroundColor="black";

 

            }

 

}

 

function OMDown(arrayID)

 

{

 

  with(a[arrayID].style)

 

            {

 

              colorCount=255;

             bgcolorCount=0;

              border="2 red inset";

 

            }

 

}

  

</script>

 

<style type="text/css">

 

body div#container a {

 font-weight:bold;

 color:lightyellow;

 }

 

</style>

 

 

Now add the following HTML code which will design the layout of your page and call the above JavaScript functions.

 

 

<body MS_POSITIONING="GridLayout">

 <div id="container">

   <span style="color:white;z-index:1;position:relative;display:none;background-color:transparent;">Dynamic Fading Links (Cross-Browser) Created By Richard Hucko, Kaneohe Hawaii 96744 - 2004 - WebSite: http://DynamicScripts.tk - For More FREE JavaScript and DHTML Effects Check Out: www.DynamicScripts.tk - Home of Quality JavaScript and DHTML Effects - RHUCKO1 - Search Engine Keywords: Richard Hucko, DynamicScripts, RHUCKO1</span>

 

 <a href="#" onmouseover="OMOver(0)" onmouseout="OMOut(0)" onmousedown="OMDown(0)"># One</a>

 

 <a href="#" onmouseover="OMOver(1)" onmouseout="OMOut(1)" onmousedown="OMDown(1)"># Two</a>

 

 <a href="#" onmouseover="OMOver(2)" onmouseout="OMOut(2)" onmousedown="OMDown(2)"># Three</a>

 

 <a href="#" onmouseover="OMOver(3)" onmouseout="OMOut(3)" onmousedown="OMDown(3)"># Four</a>

 

 <a href="#" onmouseover="OMOver(4)" onmouseout="OMOut(4)" onmousedown="OMDown(4)"># Five</a>

 

 </div>

 

<center>Dont forget to visit devasp<br>

<a href="http://www.devasp.com">www.devasp.com</a>

</center>

 

</body>

 

 

Run your application and take the mouse over the links and see the fading effects.

 

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Displaying the Browser Properties using Java Script.

Disclaimer - Privacy
© 2002-2017 DevASP.net