Scrolling Image
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Scrolling Image</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:30pt; color:#FF9900; font-weight:bold}
</style>
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Scrolling Image</span>
<br>
</center>
<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.com/javascripts/scrolling_image.htm
//*********************************************
//* Scrolling Image *
//* Created 20/04/02 *
//* Scrolls an image in both directions *
//* (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);
//------------------C U S T O M I S E------------------------
var img_path="http://www.java2s.com/style/logo.png";
var time_length =50; //Scroll delay in milliseconds
var begin_pos = 265; //Start position of scroll hint
//-----------------------------------------------------------
var i=begin_pos;
var j=i;
var scroll_length = 350; //The scroll length
var original_time=time_length;
if (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}
//SCROLL RIGHT
function scroll_right(layerName)
{
if (NS4 || IE4)
{
if(i<(begin_pos+scroll_length))
{
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.visibility="visible"');
eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');
i++;
j++;
}
if(i==j)
{
setTimeout("scroll_right('"+layerName+"')",time_length);
}
}
}
//SCROLL LEFT
function scroll_left(layerName)
{
if (NS4 || IE4)
{
if(i>(begin_pos-scroll_length))
{
eval(layerRef+'["'+layerName+'"]'+
styleSwitch+'.visibility="visible"');
eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');
i--;
j--;
}
if(i==j)
{
setTimeout("scroll_left('"+layerName+"')",time_length);
}
}
}
function scroll_out()
{
time_length=10000000000000;
}
function reset()
{
time_length=original_time;
}
document.write('<div id="prem_hint" style="position:relative; left:' + begin_pos + '" class="prem_hint"><img src="' + img_path + '"><br><font size="-1"><b>You can even scroll a Text<br><font color="#003399">You can scroll multiple lines.</font></b></font></div><center><a href="#" class="link" onmouseover="javascript:reset(); scroll_left('prem_hint');" onmouseout="javascript:scroll_out();"><b><< Scroll Left</b></a> <b>|</b> <a href="#" class="link" onmouseover="javascript:reset(); scroll_right('prem_hint');" onmouseout="javascript:scroll_out();"><b>Scroll Right >></b></a></center>');
</script>
<!--END REQUIRED-->
<br>
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
Using this script you can scroll an image in the "left" or "right" direction.
<br><br>To use this Javascript,view the source of this document. Copy the <script> section
and place it wherever you want it in your page.
<br><br>
<font face="courier">img_path</font> : The image path ("qiksearch.gif" 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 your scrollable content. (265 here)
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.com" class="link">© 2002 Premshree Pillai. All rights reserved.</a></center>
<br>
<center><a href="http://www.qiksearch.com/javascripts/scrolling_image.htm"><font face="arial,verdana,helvetica" size="-2" color="#CCCCCC">http://www.qiksearch.com/javascripts/scrolling_image.htm</font></a></center>
</body>
</html>
Related examples in the same category
