
	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: 30795 times

Rating (11 votes):

3.7 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

Web Hosting

ASP Hosting

Domain Names

Windows Web Hosting

Web Hosting

Web Hosting Directory

Website Editor

Web Hosting

Web Hosting Services

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
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!

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.

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

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

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.

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.

Mouse Trail with Text by Jeff Anderson A Classic Mouse Trail Script, with configurable text, rather than images. We chose `I love you` for our text - what will you chose?

Recent Forum Threads

•	Re: sorting and Linked list
•	Re: need help linked list
•	Re: Help with arrays
•	Re: Reading from a file
•	Re: Why Use Method?
•	Re: Help with a simple program
•	Re: need help with quiz
•	Re: Help with filesystem object & displaying in a table
•	Re: Genetic Algorithm Help

Recent Articles

	Multiple submit buttons with form validation
	Understanding Hibernate ORM for Java/J2EE
	HTTP screen-scraping and caching
	a javascript calculator
	A simple way to JTable
	Java Native Interface (JNI)
	Parsing Dynamic Layouts
	MagicGrid
	Caching With ASP.Net
	Creating CSS Buttons

Site Survey

Help us serve you better. Take a five minute survey. Click here!

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