Link Hint Scroller 2.0 (IE) : Animation « GUI Components


 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Link Hint Scroller 2.0</title>

<style type="text/css">

.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#DD0000; font-weight:normal}

.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#FF9900; font-weight:normal}

.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}

.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#3366CC; font-weight:bold}

</style>

<!--BEGIN REQUIRED-->

<script language="javascript">

// Location of this script:

// http://www.qiksearch.com/javascripts/link_hint_scroller20.htm

//*********************************************

//* Link Hint Scroller 2.0                    *

//* Modified 18/04/02                         *

//* This script when you move your mouse over *

//* displays a scrolling hint                 *

//* (c) Premshree Pillai,                     *

//* http://www.qiksearch.com                  *

//* E-mail : premshree@hotmail.com            *

//* Use the script freely as long as this     *

//* message is intact                         *

//*********************************************



window.onerror = null;

 var bName = navigator.appName;

 var bVer = parseInt(navigator.appVersion);

 var NS4 = (bName == "Netscape" && bVer >= 4);

 var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);

 var NS3 = (bName == "Netscape" && bVer < 4);

 var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);



//-----------------------------------------------------------

 var scroll_length = 150; //The scroll length

 var time_length =50; //Scroll delay in milliseconds

 var begin_pos = 260; //Start position of scroll hint

 var i=begin_pos;

 var j=i;

 var scroll_dir = "right"; // To scroll left use "left"

                           // To scroll right use "right"

//-----------------------------------------------------------

 

if (NS4 || IE4) {

 if (navigator.appName == "Netscape") {

 layerStyleRef="layer.";

 layerRef="document.layers";

 styleSwitch="";

 }else{

 layerStyleRef="layer.style.";

 layerRef="document.all";

 styleSwitch=".style";

 }

}



//SCROLL

function Scroll(layerName)

{

 if (NS4 || IE4)

 { 

  if(scroll_dir=="right")

  {

   if(i<(begin_pos+scroll_length))

   {

    eval(layerRef+'["'+layerName+'"]'+

    styleSwitch+'.visibility="visible"');

    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');

    i++;

    j++;

   }

  }

  if(scroll_dir=="left")

  {

   if(i>(begin_pos-scroll_length))

   {

    eval(layerRef+'["'+layerName+'"]'+

    styleSwitch+'.visibility="visible"');

    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.right="'+(-i)+'"');

    i--;

    j--;

   }

  }

  if(i==j)

  {

   setTimeout("Scroll('"+layerName+"')",time_length);

  }

 }

}



//STOP SCROLLING

function StopScroll(layerName)

{

 if(scroll_dir=="right")

 {

  i=begin_pos+scroll_length;

  eval(layerRef+'["'+layerName+'"]'+

  styleSwitch+'.left="'+(i)+'"');

  hideLayer(layerName);

 }

 if(scroll_dir=="left")

 {

  i=begin_pos-scroll_length;

  eval(layerRef+'["'+layerName+'"]'+

  styleSwitch+'.right="'+(-i)+'"');

  hideLayer(layerName);

 }

}



function reset()

{ 

 i=begin_pos;

 j=i;

}



// HIDE HINT

function hideLayer(layerName)

{

 if (NS4 || IE4)

 {

  eval(layerRef+'["'+layerName+'"]'+

  styleSwitch+'.visibility="hidden"');

 }

}



</script>

<!--END REQUIRED-->

</head>

<body bgcolor="#FFFFFF">

<center>

<span class="header">Link Hint Scroller 2.0</span>

<br>



<!--BEGIN REQUIRED-->

<a href="#" class="link" onmouseover="javascript:reset();Scroll('prem_hint');" onmouseout="javascript:StopScroll('prem_hint');">Move your mouse over</a>

</center>

<div id="prem_hint" style="position:relative; visibility:hidden" class="prem_hint">

<b>This is the hint or description for the above link!</b>

</div>

<!--END REQUIRED-->

<table align="center" width="400"><tr><td>

<font face="verdana,arial,helvetica" size="-1" color="#000000">

When you move your mouse over the above link a hint or something about the link

will appear below the link in a scrolling fashion. When you move your mouseout the scrolling will stop.

<br><br>To use this  Javascript,view the source of this document. Firstly you must copy the script

and place it in the head section. Then you must copy the &lt;DIV&gt; section and place it wherever you want it in the body. All the required section are marked by the comments &lt;!--BEGIN REQUIRED--&GT; and &lt;!--END REQUIRED--&gt;



<br><br>

<font face="courier">scroll_length</font> : Scroll length variable (150 here)<br>

<font face="courier">time_length</font> : Speed of scroll (50 here, meaning after 50 milliseconds the hint will change position by 1 pixel i.e a speed of 20 pixels/second)<br>

<font face="courier">begin_pos</font> : Beginning position of hint (300 here)

<br><br>

<b>New in Version 2.0</b><br>

In this version, you can change the direction of scrolling.<br>



<font face="courier">scroll_dir</font> : Direction of scrolling ("right" here)

</font>

</td></tr></table>

<br>

<center><a href="mailto:premshree@hotmail.com" class="link">&#169 Premshree Pillai</a></center>

</body>

</html>
Link Hint Scroller 2.0 (IE) : Animation « GUI Components « JavaScript DHTML
