PDA

View Full Version : 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




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


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


<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):


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

JRR
09-28-2014, 03:47 AM
As always John this is awesome! Just what I wanted to the letter. Now I can let my vendor advertise another page with specials and such by just using the hover function.

Edit:

I just discovered one flaw John and I'm sure this is a easy fix I hope. The ad banners are sized at 600 X 100px and I want that to stay the same but I don't want any size limits on the hover image at all. Can the hover part be modified to have different size limits or none at all while leaving the top ad banner size intact?

Thanks

jscheuer1
09-28-2014, 02:39 PM
Try this version out:


<!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>
<!--[if lt IE 7]>
<style type="text/css">
#slideitlink {
text-align: left;
display: inline-block;
}
</style>
<![endif]-->
</head>
<body>
<p align="center" style="position: relative;">
<button onclick="clearTimeout(slideit.timer); step = whichlink || numimgs; slideit();">PREV</button>
<a id="slideitlink" 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" /></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.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];
slidehover.im.style.visibility = 'visible';
slidehover.im.style.left = document.images.slide.offsetLeft + document.images.slide.width / 4 + 'px';
}

function slideout(){
slidehover.im.style.visibility = 'hidden';
slideit.timer = setTimeout(function(){slideit();}, 4000);
}

slidehover.im = document.createElement('img');
slidehover.im.style.position = 'absolute';
slidehover.im.style.border = '1px solid black';
slidehover.im.style.visibility = 'hidden';
slidehover.im.style.left = slidehover.im.style.top = 0;
document.images.slide.parentNode.insertBefore(slidehover.im, document.images.slide);

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

This can be tweaked, for instance I've positioned the hover image a quarter of the width of the banners to the left of the left edge of the banners.The only thing I'm not real happy about in this version is that the hover images, since they will now inhabit their own img tag, should be preloaded. The easiest way to do that is to put them in a div like so, first thing in the body section of the page:


<div style="position: absolute; left: -3000px; top: -3000px; visibility: hidden;">
<img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif">
<img src="next hover image here">
<!-- Keep putting images in img tags until all of the hover images are listed -->
</div>

JRR
09-28-2014, 09:16 PM
Ok John I've put the code in like you asked and we are getting closer for sure. Here is my test sight where I am trying things out:

http://scootproftest.freeforums.net/

Now click on the NEXT button to you come to the ad banner for Rapid Repair and do the mouseover and watch the image I put in to come up which is this image:

http://www.rapidrepairpowersports.com/images/RRBldg.jpg

The image is 800px X 600px and with it offset in the code at 4 it went completely off the page so I changed the 4 in this line to 12


slidehover.im.style.left = document.images.slide.offsetLeft + document.images.slide.width / 4 + 'px';

That does not center it up completely and it doesn't matter if you go to a higher number it doesn't change any after 12.

There is another problem, just hold your mouse on the banner with the hover image showing and watch the text of my news message banner right under this. You can read that right through the hover image!

I don't understand this and how to apply it and if it's better than please tell me where to put it.


<div style="position: absolute; left: -3000px; top: -3000px; visibility: hidden;">
<img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif">
<img src="next hover image here">
<!-- Keep putting images in img tags until all of the hover images are listed -->
</div>

Can you center the hover image?

jscheuer1
09-28-2014, 11:40 PM
I don't see the recommended preload (Oh I see you didn't understand it, it's just HTML, more on that later). Even without that we can align to the left edge of the banners by making this line:


slidehover.im.style.left = document.images.slide.offsetLeft + document.images.slide.width / 4 + 'px';

into:


slidehover.im.style.left = document.images.slide.offsetLeft + 'px';

Looking at the page, it looks like you might not understand some of the basics of HTML. You are only allowed one opening <body> tag per page, that one has two. Mostly browsers will error correct for that, but it can lead to problems sometimes. There are three basic elements (html, head, and body):


<html>
<head>
<!-- title, meta tags, stylesheets, and scripts go here -->
</head>
<body>
<!-- content goes here can include some scripts, mostly just presentational tags like p, div, a, img, object, etc. -->
</body>
</html>

If you have any more than that of these three there is something wrong. You don't have to have them all, but usually it's best. When they are all there, they need to be in the above order.

So anyways, once you decide on where your opening <body> tag is, right after that is where this should go:


<div style="position: absolute; left: -3000px; top: -3000px; visibility: hidden;">
<img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif">
<img src="next hover image here">
<!-- Keep putting images in img tags in here until all of the hover images are listed -->
</div>

All the hover images should be in there. They will not be seen because of the position, left and top, and visibility styles of the div. They will preload though. That means that once they are called for by the script there will be no delay in seeing them, and that their dimensions should be readily available if needed for positioning.

dougshreff
09-29-2014, 01:07 AM
hi, I am new today and made some mistakes, posting upset after making some errors, hey, I need your help, kindly send me an email so I can go forward here, I need to remove a thread or ask you to put one back that I tried to edit and it never came back, I look like a fool on there now...
http://www.dynamicdrive.com/forums/newreply.php?do=newreply&p=305109&noquote=1
email please with respect, I hope im making a new friend, dougshreff@aol.com
I am a candidate but truly need coding help, thanks sir! I added you as a friend but it seems it was taken out.

JRR
09-29-2014, 01:42 AM
I don't see the recommended preload (Oh I see you didn't understand it, it's just HTML, more on that later). Even without that we can align to the left edge of the banners by making this line:


slidehover.im.style.left = document.images.slide.offsetLeft + document.images.slide.width / 4 + 'px';

into:


slidehover.im.style.left = document.images.slide.offsetLeft + 'px';

Looking at the page, it looks like you might not understand some of the basics of HTML. You are only allowed one opening <body> tag per page, that one has two. Mostly browsers will error correct for that, but it can lead to problems sometimes. There are three basic elements (html, head, and body):


<html>
<head>
<!-- title, meta tags, stylesheets, and scripts go here -->
</head>
<body>
<!-- content goes here can include some scripts, mostly just presentational tags like p, div, a, img, object, etc. -->
</body>
</html>

If you have any more than that of these three there is something wrong. You don't have to have them all, but usually it's best. When they are all there, they need to be in the above order.

So anyways, once you decide on where your opening <body> tag is, right after that is where this should go:


<div style="position: absolute; left: -3000px; top: -3000px; visibility: hidden;">
<img src="http://i499.photobucket.com/albums/rr359/jrryan2008/Scoot%20Prof/rapid_repair-1.gif">
<img src="next hover image here">
<!-- Keep putting images in img tags in here until all of the hover images are listed -->
</div>

All the hover images should be in there. They will not be seen because of the position, left and top, and visibility styles of the div. They will preload though. That means that once they are called for by the script there will be no delay in seeing them, and that their dimensions should be readily available if needed for positioning.

OK that did the trick John on centering the hover image and I do understand now what you just said about HTML coding, I'm learning it little by little. I'm still having one issue that doesn't make sense? maybe it's my browser? Go to my test forum where you can see this ad banner with the hover image added.

http://scootproftest.freeforums.net/

Ok you can see the ad banner with the PREV and NEXT buttons and you can watch it scroll from ad to ad. Right under it is my news/welcome banner and it has messages that change, even has smilies in it. Now again bring up the ad Rapid Repair and mouse over it and watch the new image appear. Leave it up for a minute and watch the news/welcome messages show right through the hover image! How is this happening?

jscheuer1
09-29-2014, 04:49 AM
That's what is called z-index. x is width, y is height. z is what is referred to as stacking or more commonly, depth. It's like as you look into a page, if two things are in the same spot, which one will be on top. A z-index of 2 should fix that in this case, add the highlighted:


slidehover.im = document.createElement('img');
slidehover.im.style.position = 'absolute';
slidehover.im.style.border = '1px solid black';
slidehover.im.style.visibility = 'hidden';
slidehover.im.style.zIndex = 2;
slidehover.im.style.left = slidehover.im.style.top = 0;
document.images.slide.parentNode.insertBefore(slidehover.im, document.images.slide);

JRR
09-29-2014, 11:18 AM
Solved! Thanks a million!

JRR
10-06-2014, 03:18 PM
Good Morning John.

As usual I've got another question or request for this code. I'm getting all my images and things together to put this in use. I tried a couple of things and didn't have any luck but I'm sure it's no task for you.

Can a title be put in the hover image only centered at the top of the hover image that appears? I would like it so that a person could choose or not choose to use one.

Thanks

jscheuer1
10-06-2014, 11:26 PM
"choose or not choose to use one" What do you mean by 'one'? And who exactly is choosing?

JRR
10-07-2014, 12:10 AM
Sorry for the poor explanation. I'm using this in a header on my forums and for my ad vendors. So they send me the image link they want to appear as the hover image. My ad banners are 600 X 100 pixels and I'm going to allow them to go up to 600 X 600 pixels on the hover image. They will send me a link to that image and I will place it in the code in the header of my forum. If they want it changed they have to send me another image link and I'll change it.

What I want is for the option of a title over the hover image if they want one but if they do not want a title then so be it. I was concerned that if you put a title on one single image say in a group of ten then all would have to have a title too? Does this make sense?

Thanks

jscheuer1
10-07-2014, 12:46 AM
The easiest thing would be to use the image's title attribute (this means, as one hovers over the hover image, a title 'tooltip' will appear). And things could be arranged so that if subsequent hover images were not supposed to have a title, the attribute could be removed, or it could be alternatively be changed to a new one. Add the highlighted line to the slidehover function and add the slidehover.title function (also highlighted) as shown:


function slidehover(){
clearTimeout(slideit.timer);
slidehover.im.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];
slidehover.im.style.visibility = 'visible';
slidehover.im.style.left = document.images.slide.offsetLeft /* + document.images.slide.width / 4 */ + 'px';
slidehover.title();
}

slidehover.title = function(){
slidehover.im.title = [
/* 1 */ "Bob's Yer Uncle",
/* 2 */ "Hi",
/* 3 */ "",
/* 4 */ "",
/* 5 */ "",
/* 6 */ "",
/* 7 */ "",
/* 8 */ "",
/* 9 */ "",
/* 10 */ ""
][whichlink];
};

function slideout(){
slidehover.im.style.visibility = 'hidden';
slideit.timer = setTimeout(function(){slideit();}, 4000);
}

Notice in the slidehover.title function that the title will be as shown for each hover image (by the numbers), or none if there's a "" (empty double quotes) for a given entry.

JRR
10-07-2014, 01:34 AM
John I don't know how to thank you but this is absolutely perfect! I could put anything in the title or leave it out. This has developed into one very nice code. One little issue. When you put your cursor over the hover image the title comes up where you have the cursor hand at. In other words if the cursor is on the right side of the hove image the title is there, in the middle it's located there. Can you fix it where the tool tip title will be centered and at the top of the image?

Check out the first two ads and you'll see what I mean:

http://scootproftest.freeforums.net/

jscheuer1
10-07-2014, 01:24 PM
<!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;
}
#slidhovertitle {
color: white;
background-color: black;
height: auto;
border: 1px solid gray;
font: normal 95% verdana, ariel, sas-serif;
}
</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>
<!--[if lt IE 7]>
<style type="text/css">
#slideitlink {
text-align: left;
display: inline-block;
}
</style>
<![endif]-->
</head>
<body>
<!-- <p>&nbsp;</p> -->
<p align="center" style="position: relative;">
<button onclick="clearTimeout(slideit.timer); step = whichlink || numimgs; slideit();">PREV</button>
<a id="slideitlink" 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" /></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.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];
slidehover.im.style.visibility = 'visible';
slidehover.im.style.left = slidehover.div.style.left = document.images.slide.offsetLeft /* + document.images.slide.width / 4 */ + 'px';
slidehover.title();
}

slidehover.title = function(){
var title = [
/* 1 */ "Bob's Yer Uncle. this has to be really long to see if it makes a difference in supsequent ones, OK?",
/* 2 */ "Hi",
/* 3 */ "",
/* 4 */ "",
/* 5 */ "",
/* 6 */ "",
/* 7 */ "",
/* 8 */ "",
/* 9 */ "",
/* 10 */ ""
][whichlink];
slidehover.div.innerHTML = title;
slidehover.div.style.visibility = title? 'visible' : 'hidden';
};

function slideout(){
slidehover.im.style.visibility = slidehover.div.style.visibility = 'hidden';
slidehover.im.src = '';
slidehover.im.removeAttribute('src');
slideit.timer = setTimeout(function(){slideit();}, 4000);
slidehover.div.style.top = 'auto';
}

slidehover.div = document.createElement('div');
slidehover.div.id = 'slidhovertitle';
slidehover.im = document.createElement('img');
slidehover.im.style.position = slidehover.div.style.position = 'absolute';
slidehover.im.style.border = '1px solid black';
slidehover.im.style.visibility = slidehover.div.style.visibility = 'hidden';
slidehover.im.style.zIndex = slidehover.div.style.zIndex = 2;
slidehover.im.style.left = slidehover.im.style.top = slidehover.div.style.left = 0;
slidehover.im.onload = function(){slidehover.div.style.width = this.width + 'px'; slidehover.div.style.top = '-' + slidehover.div.offsetHeight + 'px';};
document.images.slide.parentNode.insertBefore(slidehover.div, document.images.slide);
slidehover.div.parentNode.insertBefore(slidehover.im, slidehover.div);

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

JRR
10-07-2014, 03:32 PM
Ok John I changed the code to reflect your changes and put in a long message as per your instructions in the code on the first ad and it did not solve the problem?

jscheuer1
10-07-2014, 07:28 PM
Oh well, worked here. Are you sure you copied the whole thing? I put the whole thing in because a lot of it was changed, not just the script code, and even in that not just in one or two places.

Demo:

http://home.comcast.net/~jscheuer1/side/demos/tidbits/slider-4-h.htm

JRR
10-08-2014, 03:48 AM
Oh well, worked here. Are you sure you copied the whole thing? I put the whole thing in because a lot of it was changed, not just the script code, and even in that not just in one or two places.

Demo:

http://home.comcast.net/~jscheuer1/side/demos/tidbits/slider-4-h.htm

Missed a part John and you're right. it works great! Thanks again!