HTML JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. HTML
  4. Scrolling Image



Scrolling Image

.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}




Scrolling Image





// 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.rntsoft.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('
You can even scroll a Text
You can scroll multiple lines.
<< Scroll Left | Scroll Right >>
');






Using this script you can scroll an image in the "left" or "right" direction.


To use this  Javascript,view the source of this document. Copy the <script> section
and place it wherever you want it in your page.



img_path : The image path ("qiksearch.gif" here)

time_length : 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)

begin_pos : Beginning position of your scrollable content. (265 here)




© 2002 Premshree Pillai. All rights reserved.



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