Scrolling Image : Image Img « HTML




<!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 : [email protected]            *

//* 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(&#39;prem_hint&#39;);" onmouseout="javascript:scroll_out();"><b><< Scroll Left</b></a> <b>|</b> <a href="#" class="link" onmouseover="javascript:reset(); scroll_right(&#39;prem_hint&#39;);" 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 &lt;script&gt; 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:[email protected]" class="link">&#169 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>
Scrolling Image : Image Img « HTML « JavaScript DHTML
