Next button for scroll code.

**JRR** · 01-31-2014, 07:47 PM

I've got a great scroll code that I use for member banners and have no complaints on how well it works but I was hoping to add a helpful feature. It scrolls at the speed you want and when clicking on the banner goes to the link or website of the banner owner. But lets say you are on a thread and all of a sudden you would like to go to a certain banner member's site you have to wait until their banner comes up to do so. I like to run it slower for more exposer time but it's frustrating to have to wait through all the banners you don't want to use until your desired one appears.

What I was wondering is could a "Next" button be placed beside each banner so that if you wanted to immediately start scrolling through the banners manually you could and reach the desired banner more quickly? Here is the banners in action working:

http://www.thescooterprofessor.proboards.com/

Here is the code. Thanks

Code:

<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="http://www.jr-richscooterdoc.com/Vbanlogo/RapidJim.png"
var image2=new Image()
image2.src="http://www.jr-richscooterdoc.com/Vbanlogo/Abscoot.jpg"
var image3=new Image()
image3.src="http://www.jr-richscooterdoc.com/Vbanlogo/MegM2.jpg"
var image4=new Image()
image4.src="http://www.jr-richscooterdoc.com/Vbanlogo/valleyS.jpg"
var image5=new Image()
image5.src="http://www.jr-richscooterdoc.com/Vbanlogo/buggyP.jpg"
var image6=new Image()
image6.src="http://www.jr-richscooterdoc.com/Vbanlogo/SCOOTERCHROMEPARTS.png"
var image7=new Image()
image7.src="http://www.jr-richscooterdoc.com/Vbanlogo/scrappydog.jpg"
var image8=new Image()
image8.src="http://www.jr-richscooterdoc.com/Vbanlogo/Bintelli.jpg"
var image9=new Image()
image9.src="http://www.jr-richscooterdoc.com/Vbanlogo/TVnAC.png"
var image10=new Image()
image10.src="http://www.jr-richscooterdoc.com/Vbanlogo/PFS.jpg"

//-->

</script>
<p align="center">
<a href="javascript:slidelink()">
<img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif" name="slide" border="1" width="600" height="100" position="center" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
setTimeout("slideit()",8000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://www.rapidrepairpowersports.com/"
else if (whichimage==2)
window.location="http://www.absolutelyscooterparts.net"
else if (whichimage==3)
window.location="http://www.megamotormadness.com/"
else if (whichimage==4)
window.location="http://www.scootersus.com"
else if (whichimage==5)
window.location="http://www.buggypartsnw.com"
else if (whichimage==6)
window.location="http://scooterchromeparts.com"
else if (whichimage==7)
window.location="http://www.scrappydogscooters.com/Home_Page.php"
else if (whichimage==8)
window.location="http://www.bintelli.com/"
else if (whichimage==9)
window.location="http://www.testedscooterparts.com/"
else if (whichimage==10)
window.location="http://www.partsforscooters.com/"

}
//-->
</script>
</p>
<!--Scroller Ad Code-->

**jscheuer1** · 02-01-2014, 02:23 AM

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="http://www.jr-richscooterdoc.com/Vbanlogo/RapidJim.png"
var image2=new Image()
image2.src="http://www.jr-richscooterdoc.com/Vbanlogo/Abscoot.jpg"
var image3=new Image()
image3.src="http://www.jr-richscooterdoc.com/Vbanlogo/MegM2.jpg"
var image4=new Image()
image4.src="http://www.jr-richscooterdoc.com/Vbanlogo/valleyS.jpg"
var image5=new Image()
image5.src="http://www.jr-richscooterdoc.com/Vbanlogo/buggyP.jpg"
var image6=new Image()
image6.src="http://www.jr-richscooterdoc.com/Vbanlogo/SCOOTERCHROMEPARTS.png"
var image7=new Image()
image7.src="http://www.jr-richscooterdoc.com/Vbanlogo/scrappydog.jpg"
var image8=new Image()
image8.src="http://www.jr-richscooterdoc.com/Vbanlogo/Bintelli.jpg"
var image9=new Image()
image9.src="http://www.jr-richscooterdoc.com/Vbanlogo/TVnAC.png"
var image10=new Image()
image10.src="http://www.jr-richscooterdoc.com/Vbanlogo/PFS.jpg"

//-->

</script>
<p align="center">
<a href="javascript:slidelink()">
<img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif" name="slide" border="1" width="600" height="100" position="center" /></a>
<a href="javascript:next();" onclick="clearTimeout(slideit.timer); slideit(); return false;">Next</a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
slideit.timer = setTimeout("slideit()",8000);
}
slideit();
function slidelink(){
if (whichimage==1)
window.location="http://www.rapidrepairpowersports.com/"
else if (whichimage==2)
window.location="http://www.absolutelyscooterparts.net"
else if (whichimage==3)
window.location="http://www.megamotormadness.com/"
else if (whichimage==4)
window.location="http://www.scootersus.com"
else if (whichimage==5)
window.location="http://www.buggypartsnw.com"
else if (whichimage==6)
window.location="http://scooterchromeparts.com"
else if (whichimage==7)
window.location="http://www.scrappydogscooters.com/Home_Page.php"
else if (whichimage==8)
window.location="http://www.bintelli.com/"
else if (whichimage==9)
window.location="http://www.testedscooterparts.com/"
else if (whichimage==10)
window.location="http://www.partsforscooters.com/"

}
//-->
</script>
</p>
<!--Scroller Ad Code-->
</body>
</html>

**JRR** · 02-01-2014, 12:16 PM

Awesome John! Works like a charm! Thanks!

**JRR** · 02-02-2014, 12:12 AM

Another question/request? I made a button out of this and centered it up with my banner and my members love it and some wondered if a back button could be added? If so can we put it on the left side of the banner?

http://www.thescooterprofessor.proboards.com/

**jscheuer1** · 02-02-2014, 04:01 AM

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
img[name='slide'] {
	vertical-align: middle;
}
</style>
</head>
<body>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="http://www.jr-richscooterdoc.com/Vbanlogo/RapidJim.png"
var image2=new Image()
image2.src="http://www.jr-richscooterdoc.com/Vbanlogo/Abscoot.jpg"
var image3=new Image()
image3.src="http://www.jr-richscooterdoc.com/Vbanlogo/MegM2.jpg"
var image4=new Image()
image4.src="http://www.jr-richscooterdoc.com/Vbanlogo/valleyS.jpg"
var image5=new Image()
image5.src="http://www.jr-richscooterdoc.com/Vbanlogo/buggyP.jpg"
var image6=new Image()
image6.src="http://www.jr-richscooterdoc.com/Vbanlogo/SCOOTERCHROMEPARTS.png"
var image7=new Image()
image7.src="http://www.jr-richscooterdoc.com/Vbanlogo/scrappydog.jpg"
var image8=new Image()
image8.src="http://www.jr-richscooterdoc.com/Vbanlogo/Bintelli.jpg"
var image9=new Image()
image9.src="http://www.jr-richscooterdoc.com/Vbanlogo/TVnAC.png"
var image10=new Image()
image10.src="http://www.jr-richscooterdoc.com/Vbanlogo/PFS.jpg"

//-->

</script>
<p align="center">
<button onclick="clearTimeout(slideit.timer); step = (whichimage + 9) % 10 || 10; slideit();">PREV</button>
<a href="javascript:slidelink()">
<img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif" name="slide" border="1" width="600" height="100" position="center" /></a>
<button onclick="clearTimeout(slideit.timer); slideit();">NEXT</button>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
slideit.timer = setTimeout("slideit()",8000);
}
slideit();
function slidelink(){
if (whichimage==1)
window.location="http://www.rapidrepairpowersports.com/"
else if (whichimage==2)
window.location="http://www.absolutelyscooterparts.net"
else if (whichimage==3)
window.location="http://www.megamotormadness.com/"
else if (whichimage==4)
window.location="http://www.scootersus.com"
else if (whichimage==5)
window.location="http://www.buggypartsnw.com"
else if (whichimage==6)
window.location="http://scooterchromeparts.com"
else if (whichimage==7)
window.location="http://www.scrappydogscooters.com/Home_Page.php"
else if (whichimage==8)
window.location="http://www.bintelli.com/"
else if (whichimage==9)
window.location="http://www.testedscooterparts.com/"
else if (whichimage==10)
window.location="http://www.partsforscooters.com/"

}
//-->
</script>
</p>
<!--Scroller Ad Code-->
</body>
</html>

**JRR** · 02-02-2014, 11:00 AM

John You're a champ! Also it was easy to see how to edit. On one forum I have 10 banners, the other one 9 so I just changed the numbers to match and it was perfect

Thanks!

**jscheuer1** · 02-02-2014, 01:21 PM

I just discovered there's an easier way:

Code:

<button onclick="clearTimeout(slideit.timer); step = --whichimage || 10; slideit();">PREV</button>

only one number to change.

**JRR** · 02-02-2014, 06:53 PM

Got it! Thanks!

**JRR** · 09-27-2014, 04:19 AM

Been awhile since I asked about this code and it still works great but I was wondering if the code could be changed to a mouse over type that would display another chosen image with the ability to still click on the image to take one to a link?

I can use this code in my templates or headers to make this happen:

Code:

<a href="http://thescooterprofessor.proboards.com/" ><img src=" http://www.jr-richscooterdoc.com/perspics/docisin.jpg" onmouseover="this.src='http://www.jr-richscooterdoc.com/perspics/monkey.gif'" onmouseout="this.src='http://www.jr-richscooterdoc.com/perspics/docisin.jpg'"/></a>

Could the above banner code be changed to work like this code?

**jscheuer1** · 09-27-2014, 04:55 PM

Let me get this straight. The script already has an image and a link that clicking on it will take you to. All you want to do is add a hover effect to change each given image to a different one, right? Hmm, if so, looking at it I think you would also want it to pause while the mouse is over it, otherwise things could get messy. Pausing while the mouse is over it is a good idea even without the hover effect because otherwise a link might change before the person is able to click on it. And with the hover effect, it would be even more important. If that's what you want, and you agree about the pause, this seems to work (though I may refine it):

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
img[name='slide'] {
	vertical-align: middle;
}
</style>
<script type="text/javascript">

//preload images
var image1 = new Image();
image1.src = "http://www.jr-richscooterdoc.com/Vbanlogo/RapidJim.png";
var image2 = new Image();
image2.src = "http://www.jr-richscooterdoc.com/Vbanlogo/Abscoot.jpg";
var image3 = new Image();
image3.src = "http://www.jr-richscooterdoc.com/Vbanlogo/MegM2.jpg";
var image4 = new Image();
image4.src = "http://www.jr-richscooterdoc.com/Vbanlogo/valleyS.jpg";
var image5 = new Image();
image5.src = "http://www.jr-richscooterdoc.com/Vbanlogo/buggyP.jpg";
var image6 = new Image();
image6.src = "http://www.jr-richscooterdoc.com/Vbanlogo/SCOOTERCHROMEPARTS.png";
var image7 = new Image();
image7.src = "http://www.jr-richscooterdoc.com/Vbanlogo/scrappydog.jpg";
var image8 = new Image();
image8.src = "http://www.jr-richscooterdoc.com/Vbanlogo/Bintelli.jpg";
var image9 = new Image();
image9.src = "http://www.jr-richscooterdoc.com/Vbanlogo/TVnAC.png";
var image10 = new Image();
image10.src = "http://www.jr-richscooterdoc.com/Vbanlogo/PFS.jpg";

var numimgs = 0;
while(window['image' + (++numimgs)]){}
--numimgs;

</script>
</head>
<body>
<p align="center">
<button onclick="clearTimeout(slideit.timer); step = whichlink || numimgs; slideit();">PREV</button>
<a href="javascript:slidelink()">
<img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif" name="slide" border="1" width="600" height="100" position="center" /></a>
<button onclick="clearTimeout(slideit.timer); slideit();">NEXT</button>
</p>
<script type="text/javascript">

var step = 1;
var whichlink = 0;
function slideit(){
	if (!document.images){return;}
	document.images.slide.src = window['image' + step].src;
	whichlink = step - 1;
	step = (++step) % numimgs || numimgs;
	slideit.timer = setTimeout(slideit, 8000);
}

slideit();

function slidelink(){
	window.location = [
		/* 1 */ "http://www.rapidrepairpowersports.com/",
		/* 2 */ "http://www.absolutelyscooterparts.net",
		/* 3 */ "http://www.megamotormadness.com/",
		/* 4 */ "http://www.scootersus.com",
		/* 5 */ "http://www.buggypartsnw.com",
		/* 6 */ "http://scooterchromeparts.com",
		/* 7 */ "http://www.scrappydogscooters.com/Home_Page.php",
		/* 8 */ "http://www.bintelli.com/",
		/* 9 */ "http://www.testedscooterparts.com/",
		/* 10 */ "http://www.partsforscooters.com/"
	][whichlink];
}

function slidehover(){
	clearTimeout(slideit.timer);
	slidehover.im = document.images.slide.src;
	document.images.slide.src = [
		/* 1 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
		/* 2 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
		/* 3 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
		/* 4 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
		/* 5 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
		/* 6 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
		/* 7 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
		/* 8 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
		/* 9 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif",
		/* 10 */ "http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif"
	][whichlink];
}

function slideout(){
	document.images.slide.src = slidehover.im;
	slideit.timer = setTimeout(function(){slideit();}, 4000);
}

document.images.slide.onmouseover = slidehover;
document.images.slide.onmouseout = slideout;
</script>
<!-- /Scroller Ad Code -->
</body>
</html>

Notice the highlighted image list near the end inside the slidehover() function. Since I only had one extra banner sized image handy to play with, I made them all the same. If I understand what you are going for, you would make each of these different and they would each be for the same site as the non-hover image. For example, /* 4 */ would be an alternate image for scootersus.com and /* 5 */ would be one for buggypartsnw.com, and so on.

Any questions, just let me know.