
	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM

Search Site:

Home » DHTML » Article

DHTML Fading Slide Show

Article by:

Premshree Pillai (8/19/2002)

	Add to Favourites
	Tell a friend

Sponsored by:

FindMyHosting - Web Hosting Search

Summary:

Using this script the user can scroll an image left or right by clicking a buttong

Viewed: 53153 times

Rating (12 votes):

3.8 out of 5

Rate this Article

Read Comments

Post Comments

DHTML Fading Slide Show

View Live Demo

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)

Select All Code

<!--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="images/codetoad3.gif";
 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-->

Useful Links

Affordable Windows Hosting

Reseller Hosting

Web+Hosting=$1.66

Web Hosting

Hosting

Windows Hosting

Web Hosting Providers

Cheap Hosting

Advertise here

CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums

Rate this article: Poor Excellent

View highlighted Comments

User Comments on 'DHTML Fading Slide Show '

Posted by : Archive Import (Paul) at 19:16 on Thursday, September 05, 2002

Great script...

Can you make it so that I can use multiple images (i.e. 10-15)?

Posted by : Archive Import (speedy) at 14:32 on Thursday, December 19, 2002

This code does not work in NS6 unfortunately.

Posted by : Archive Import (JanneZz) at 14:31 on Thursday, March 20, 2003

how tha f*ck does this work ??

i keep getting the same error :
expect : ')'
but this code isn't in the script anywhere!!

char 341 in line 88 or something
ARRGGG I WANT THIS TO WORK please mail me

thnx already

Posted by : Archive Import (Poodle) at 05:56 on Thursday, August 07, 2003

Good script... one alteration I had to make tho... it wouldn't stop when scrolling right..

so add in an extra variable for scroll length and set it to zero, then change the scroll right function to use this instead of scroll_length..

apart from that.. it's all good.

Posted by : Archive Import (Joe) at 03:08 on Monday, September 08, 2003

Great, Could you please tell me how to modify for multiple images, thanks.

Posted by : jbhobie at 13:43 on Wednesday, October 20, 2004

Was anyone able to get this script to load multiple images? I saw a script like this on www.corbis.com and wanted to make it work.

Posted by : bibin at 10:48 on Sunday, August 28, 2005

Sir ,
I am getting the error Expected ')' after running this file how can I solve it please reply immediately

To post comments you need to become a member. If you are already a member, please log in .

RELATED ARTICLES
Simple Thumbnail Browsing Solution by Troy Wolf This simple script allows the user to select from several thumbnail images and view the larger image, using a mixture of DHTML and Cascading style sheets.

Creating CSS Buttons by Thomas D. Greer With Cascading Style Sheets, you can turn ordinary hyperlinks into fully functional "buttons", without using JavaScript.

DHTML Horizontal Scroller by Premshree Pillai Scroll text horizontally when the user hovers over a link.

DHTML Javascript Ticker by Premshree Pillai This is a JavaScript Ticker which ticks a number of messages like the one shown above. It also has a useful 'Show All' feature.

Manipulate Scrollbar Colors Using CSS and JavaScript by Mike Thompson The thing about the default color of scrollbars is that it's dull and ugly -- usually this color is gray. Wouldn't it be nice to change this color to better fit the overall theme of your site? Luckily, Cascading Style Sheets and JavaScript can be used to do just that!

DHTML Scrolling Image by Premshree Pillai Using this script the user can scroll an image left or right by clicking a buttong

DHTML News Bar by Premshree Pillai This is the News Bar script which displays a number of messages and rotates them using DHTML.

DHTML Zoom In and Out Script by Premshree Pillai Using zoOom, you can zoom in and zoom out any image that is specified in the code.

DHTML Image Zoom Out by Premshree Pillai Click on the image and it zooms out and disappears. This script could be a way to handle advertising or other images.

Simple Mouse Trail using VB Script by Jeff Anderson With IE gaining in prominence every day, it's becoming acceptable to use VBScript in web pages. That makes some activities like the mouse trail a real cinch.

Recent Forum Threads

•	Site Hacked javascript inserted...
•	Losing background/text color when converting HTML to PDF
•	hidden div block when displayed, displays at an offset of 200px only in IE 6..
•	help - sketch
•	Re: Perl Script - File Handling.
•	Open a file from website
•	Re: to open 5 terminals from one and also execute different commands on each terminal
•	read a selected multiple line, those should match some of the values read in the files..
•	Help me please

Recent Articles

	ASP GetTempName
	Decode and Encode UTF-8
	ASP GetFile
	ASP FolderExists
	ASP FileExists
	ASP OpenTextFile
	ASP FilesystemObject
	ASP CreateFolder
	ASP CreateTextFile
	Javascript Get Selected Text

submit a link - privacy - contact - advertise - hot links - link to us - submit your article