Diagonal Scroller (IE)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Qiksearch Diagonal Scroller</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; 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:#808080; font-weight:bold}
</style>
<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.com/javascripts/qiksearch_diagonal_scroller.htm
//*********************************************
//* Qiksearch Diagonal Scroller *
//* This script when you move your mouse over *
//* displays a diagonally scrolling text *
//* (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_height = 150; //The scroll height
var time_length =50; //Scroll speed
var begin_pos = 20; //Start position of scroll hint
var i;
var j;
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 (NS4 || IE4) {
if(i<(begin_pos+scroll_height)){
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.visibility="visible"');
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.left="'+i+'"');
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.top="'+i+'"');
i++;
j++;
if(i==j){
setTimeout("Scroll('"+layerName+"')",time_length);}
}
}
}
}
//STOP SCROLLING
function StopScroll(layerName)
{
i=begin_pos+scroll_height;
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.left="'+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">Qiksearch Diagonal Scroller</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">
<font color="#FF0000"><b>This is a diagonally scrolling hint!</b></font>
</div>
<!--END REQUIRED-->
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This script is a simple modification of <a href="link_hint_scroller.htm" class="link">Link Hint Scroller</a>. The only difference here is that the hint will scroll diagonally.<br><br>
When you move your mouse over the above link a hint or something about the link
will appear below the link in a diagonally 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 <DIV> section and place it wherever you want it in the body. All the required section are marked by the comments <!--BEGIN REQUIRED--> and <!--END REQUIRED-->
<br><br>
<font face="courier">scroll_height</font> : Scroll height 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 (20 here)
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.com" class="link">© Premshree Pillai</a></center>
</body>
</html>
Related examples in the same category
