« »

This script allows you to have any number (minimum of 6) of picture links scroll continuously across the top of your page. Especially useful if you have a ton of links but don't have the room for them all. Or with a little tweaking, you could set this script up to display some banner ads.

Label: Graphical Hyperlink Slider Script

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

Graphical_Hyperlink_Slider_Script_images.zip

Copy All x2

<style type="text/css">
td {color:#dddddd}
td.bk {color:black}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT language=JavaScript1.2>
//---------------------------------------------------------------------
//'SLIDES' SCRIPT  WRITTEN BY RICHARD MALONEY RM@HISMERCY.CA
//----------------------------------------------------------------------

var numOfSlides=6; //CHANGE THIS TO NUMBER OF HTML SLIDES DEFINED BELOW (MINIMUM 6)

//SIMPLE SNIFFER-( IT WON'T BE LONG TILL THIS ORDER IS REVERSED
//				 ( AFTER THAT SAY GOODBYE TO LAYER AND ALL :-)
//				 ( SO WRITE YOUR SCRIPTS FOR W3C FIRST! )  
var IE = (document.all) ? true:false
var NS = (document.layers) ? true:false
var W3C = (document.getElementById) ? true:false

//TAKES ID AND RETURNS DOM ELEMENT
function getCSSPElement(id) {
	if (IE) 	 return document.all[id]
	else if (NS) return document.layers[id]
	else		 return document.getElementById(id)
}

//TAKES DOM AND (MOVES SLIDE LEFT) RETURNS THE NEW HORIZONTAL POSITION
function offsetLeft(el,amount) {
	if (IE)		{return (el.style.pixelLeft-=amount)}
	else if (NS){return (el.left-=amount)}
	else 		{el.style.left = parseInt(el.style.left) - amount + "px";
				 return (el.style.left)}
}

function moveSlides(id){
	var el = getCSSPElement(id)
	var t=parseInt(offsetLeft(el,4)) //parseInt to work w/W3C
	if ((t>=el.start-140)&&(t<=el.start-138)){startNextSlide(el)} 
	el.scrollID = window.setTimeout("moveSlides('" + id + "')",75)       
	if (t<=el.end) {
       	if (IE)		{el.style.pixelLeft=el.start;}
		else if (NS){el.left=el.start;} 
		else 		{el.style.left=el.start + "px";}
		clearTimeout(el.scrollID); 
	}
}

//GETS NEXT SLIDES NAME FROM PASSED ELEMENT AND ASSIGNS THE NEW THREADID TO OBJECT.SCROLLID
function startNextSlide(el) {
	var elnext=getCSSPElement(el.next)
	elnext.scrollID = window.setTimeout("moveSlides('" + el.next + "')",100)
}

//INITIALIZATION (NUMBERS BASED ON SCREEN LOCATIONS FOR TWO OVERLAY DIVS)
function intializeSlideShow(){				
	startPosition=screen.width-223; 		//starting position (x) of slide
	endPosition=80;							//ending point of image
	for (var i=0;i<numOfSlides;i++){//iterate through number of slides
		var el = getCSSPElement("s"+i)		//returns object (var makes scope local to function)
		el.start=startPosition				//know thy starting point object  (no var so global)
		el.end=endPosition					//know thy ending point object
		el.next="s"+(i+1);if (i==(numOfSlides-1)) el.next="s0"; //know the next slide too
		if(IE)el.style.pixelLeft=el.start;  //moves slide in Explorer to IT's starting point
		else if (NS) el.left=el.start;		//moves slide in netscape to IT's starting point
		else el.style.left=el.start+ "px";	//moves slide in W3C DOM  to IT's starting point
	}
	//POSITION RIGHT OVERLAY BASED ON SCREEN WIDTH 
	if(IE)		document.all["rightBlock"].style.pixelLeft=screen.width-258;
	else if (NS)document.layers["rightBlock"].left=screen.width-250;
	else 		document.getElementById("rightBlock").style.left=screen.width-250 + "px";
}

//WINDOW RESIZE/LOAD
window.resizeTo(screen.width,screen.height);
window.moveTo(0,0);
window.onload=function(){ intializeSlideShow(); moveSlides('s0'); }

</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<BODY bgcolor="black" link="white" vlink="white" alink="white" text="white">
<DIV id=s0 style="POSITION: absolute; TOP: 0px">
<A href="http://your_link1.com"><IMG border=0 height=79 name=slide0 src="test1.gif" width=120></A>
</DIV>

<DIV id=s1 style="POSITION: absolute; TOP: 0px">
<A href="http://your_link2.com"><IMG border=0 height=79 name=slide1 src="test2.gif" width=120></A>
</DIV>

<DIV id=s2 style="POSITION: absolute; TOP: 0px">
<A href="http://your_link3.com"><IMG border=0 height=79 name=slide2 src="test3.gif" width=120></A>
</DIV>

<DIV id=s3 style="POSITION: absolute; TOP: 0px">
<A href="http://your_link4.com"><IMG border=0 height=79 name=slide3 src="test4.gif" width=120></A>
</DIV>

<DIV id=s4 style="POSITION: absolute; TOP: 0px">

<A href="http://your_link5.com"><IMG border=0 height=79 name=slide4 src="test5.gif" width=120></A>
</DIV>

<DIV id=s5 style="POSITION: absolute; TOP: 0px">
<A href="http://your_link6.com"><IMG border=0 height=79 name=slide5 src="test6.gif" width=120></A>
</DIV>

<!-- THESE ARE THE PICTURES AT EITHER END. -->

<DIV id=leftBlock style="LEFT: 0px; POSITION: absolute; TOP: 0px">
<IMG alt="" border=0 height=79 src="scrollFaderWred_left_79h.gif" width=225>
</DIV>

<DIV id=rightBlock style="LEFT: 0px; POSITION: absolute; TOP: 0px">
<IMG alt="" border=0 height=79 src="scrollFaderWred_right_79h.gif" width=225>
</DIV>
</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->