Saturday, February 11, 2012

Link text move effect in web pages using Java script and CSS


I was trying to create a page for C-Graphics , the new series which I will be publishing soon.I thought that lets try to create some animated link in that page, I tried link text move effect using java script and css. I am providing that details here, may be useful for you to create good looking web pages with animated links

The effect is shown on the following link. To see the effect - place mouse over the link.




nCoolTips




The java script code is shown below. and It is given with example html file. Hope you like it.
<!-- text move effect presented by www.ncooltips.com -->
<html>
<head>
<style type="text/css">
p
{
position:absolute;
}
</style>

<script type="text/javascript">
i=0;
k=0;
t=0;

function movepos2()
{

if( t == 1 ) {
   document.getElementById("manu").style.left=k+"px";
   k++;
   }
}


function movepos()
{

 var i=0;
 t=1;
 k=10;

 for(i=0;i<20;i++) {
 setTimeout("movepos2()",i*20);
 }
}

function resetpos()
{
 k=0;
 t=0;
 document.getElementById("manu").style.left="10px";
}
</script>
</head>

<a href="_black"><p id="manu" onmouseover="movepos()" onmouseout="resetpos()">Linux Cool Tips</p></a>
</body>
</html>
Pin It
Related Posts Plugin for WordPress, Blogger...