Link Hint Scroller 2.0 (IE)




<!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 TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

Link Hint Scroller 2.0 (IE)

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
