HTML - Slideshow And Navigation Bar Not Display Correctly Together

I'm making a website for a club in my school. I'm trying to put a slideshow script that has javascript and css into the page, and I've gotten it to fit and everything, but the slideshow isn't functioning. Independently, the slideshow works. Here are the links. It would be great if someone could help me with this.

Problematic Site:
http://www.freewebs.com/valleykey/new.htm

Site without slideshow:
http://www.freewebs.com/valleykey/

Slideshow:
http://www.freewebs.com/valleykey/1.htm

Right, I have started up a gaming website and I need that Headline Slideshow feature implemented soon as.

Here is what I'm struggling with:

I want to swap the normal action buttons (supplied by the slide generator *liink at bottom) with images I have created.

Buttons I want changed too
(<)Left button =http://i40.tinypic.com/mrftlc.jpg
(>)Right button =http://i39.tinypic.com/5wuo5.jpg

I do not want any other action buttons. But I want my images to be placed around the slide like so http://i40.tinypic.com/2176tf.jpg

Here is the Code:
Code:

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];
theimage[1]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];

///// Plugin variables

playspeed=5000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;


//###########################################
window.onload=function(){

	//preload images into browser
	preloadSlide();

	//set the first slide
	SetSlide(0);

	//autoplay
	PlaySlide();
}

//###########################################
function SetSlide(num) {
	//too big
	i=num%theimage.length;
	//too small
	if(i<0)i=theimage.length-1;

	//switch the image
	document.images.imgslide.src=theimage[i][0];

	//if they want name of current slide
	document.getElementById('slidebox').innerHTML=theimage[i][2];

}


//###########################################
function PlaySlide() {
	if (!window.playing) {
		PlayingSlide(i+1);
		if(document.slideshow.play){
			document.slideshow.play.value="   Stop   ";
		}
	}
	else {
		playing=clearTimeout(playing);
		if(document.slideshow.play){
			document.slideshow.play.value="   Play   ";
		}
	}
	// if you have to change the image for the "playing" slide
	if(document.images.imgPlay){
		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
		imgStop=document.images.imgPlay.src
	}
}


//###########################################
function PlayingSlide(num) {
	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
function preloadSlide() {
	for(k=0;k<theimage.length;k++) {
		theimage[k][0]=new Image().src=theimage[k][0];
	}
}


</script>


<!-- slide show HTML -->
<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
	<td align="center">
	<a href="#" onmouseover="this.href=theimage[i][1];return false">
	<script type="text/javascript">
		document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
	</script>
	</a>
	</td>
</tr>
<tr>
	<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
	<td align="center">
		<input type="button" value="I<<" onclick="SetSlide(0);" title="Jump to starting image">
		<input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image">
		<input type="button" name="play" value="   Play   " onclick="PlaySlide();" title="Autoplay">
		<input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image">
		<input type="button" value=">>I" onclick="SetSlide(theimage.length-1);" title="Jump to ending image">
	</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

(code generated from http://www.ricocheting.com/code/java...e-slideshow-v2 if that helps)

PLEASE NOTE: We do not want the (>>) (<<) or <PLAY> buttons. Just as above.

We would gratefully accept any help - we are really bad with HTML. We have contacted the developer of the code but as of posting there has been no response.

Thx.

below there is a piece of code with slideshow (I took it from http://www.ricocheting.com/code/java...mage-slideshow). I can see only the first picture, not the rest. Can someone help me?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>try5</title>
</head>
<body>
<script type="text/javascript">
// Author: ricocheting.com
// Description: slideshow that allows visitors to flip through a series of images on your website
var x=0;
function rotate(num){
fs=document.ff.slide;
x=num%fs.length;
if(x<0) x=fs.length-1;
document.images.show.src=fs.options[x].value;
fs.selectedIndex=x;}
function auto() {
if(document.ff.fa.value == "Stop"){
rotate(++x);setTimeout("auto()", 5000);}}
</script>
<form name="ff">
<table style="border: 1px solid black; border-collapse: collapse;"
cellpadding="3">
<tbody>
<tr>
<th align="center"></th>
</tr>
<tr>
<td align="center"><img src="IMG0.JPG"
name="show">
</td>
</tr>
<tr>
<td style="border: 1px solid black;" align="center">
<select name="slide"
onchange="rotate(this.selectedIndex);">
<option value="IMG0.JPG"></option>
<option value="IMG1.JPG"></option>
</select>
</td>
</tr>
<tr>
<td style="border: 1px solid black;" align="center"><input
onclick="rotate(0);" value="ll&lt;&lt;"
title="Jump to beginning" type="button">
<input onclick="rotate(x-1);" value="&lt;&lt;"
title="Last Picture" type="button"><input name="fa"
onclick="this.value=((this.value=='Stop')?'Start':'Stop');auto();"
value="Stop" title="Autoplay" style="width: 75px;"
type="button">
<input onclick="rotate(x+1);" value="&gt;&gt;"
title="Next Picture" type="button"><input
onclick="rotate(this.form.slide.length-1);" value="&gt;&gt;ll"
title="Jump to end" type="button">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

There are about 200 photos in a folder d:\photos\.
How to make a script to display slideshow of all photos one by one without entering each photo's name?
I found a script which displays all photos but need to input all photos' name.

I want to position my slideshow in the center of the side.
the buttons are positioned with css.
http://javascript.lima-city.de/

Who can help ?

<div style="width:600px; text-align: center;"><embed type="application/x-shockwave-flash" wmode="transparent" src="http://w22.photobucket.com/pbwidget.swf?pbwurl=http://w22.photobucket.com/albums/b339/ashezfal/product-misc/91c6ecdd.pbw" height="180" width="600"><a href="http://photobucket.com/slideshows" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn.gif" style="float:left;border-width: 0;" ></a><a href="http://s22.photobucket.com/albums/b339/ashezfal/product-misc/?action=view&current=91c6ecdd.pbw" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn_viewallimages.gif" style="float:left;border-width: 0;" ></a></div>

This is the html code for a photobucket slideshow that i am trying to use on my website. my problem is that when you click on it, it takes you to my album. I know i can change that on photobucket preferences but i just want to make it so that it can't be clicked at all. Can anybody help me?

Hi, i'm trying to design a webpage and I was wondering if there was a way to create a row of pictures that ONLY scroll like a slideshow when the cursor is hovering over the buttons. Is it possible? How?

Thanks

Hi everyone,

I'm looking for a html/css script that will allow me to do something similar to the image slideshow on http://trilogyproducts.com/.

The Trilogy Products slideshow is in flash, however we were hoping to replicate it in HTML - in particular the fade in and out automated slideshow, PLUS the ability to click on to the little circle navigation and fade out the current shot and fade in the selected shot.

Any help would be very much appreciated.

Thanks
Bec

How do I make a slideshow where images roll and when clicked on go to another page?

I am a total newbie to this and so I have no idea what is going on. I downloaded a template from a wesite I forget which, but it looks great in IE, and Safari, however in Firefox, or Opera it is all screwed up. The site is www.ottersupport.com would somebody mind look at the code and let me know what i need to fix ?

Thanks

Hello,
I'm new here and I hope here is the best place to ask for help.
Recently i found a piece of code on the net that will allow me to watch online different pictures.
I have 499 folders and sorted them as 01 02 03 04 05 06 07 08 09 11 12 13 14 15 .... 100.....150.....350...499
but in my ftp client everything is messed up(filezilla)
after i upload them on my server when i want to watch them .. the list appears like this:
after folder no.10 i have folder no.100 and after folder 199 i have folder no.20 .. and so on ..
how could i fix them so that the numbering would be correct ?

Hey, I'm helping design a site www.tbdgaming.com and we have an ad box up top that shows different pictures and captions for each one, and what we'd like to do is have those pictures (theres 5) switch every x seconds to the next one, and we'd like it to be clean. The code is:
Code:

	<!-- starting headlines -->
			<div class="headlineWrap" id="headlineWrap">

				<!-- headline 1 -->
				<div id="headline1">
					<a href=""><img src="http://i39.tinypic.com/2zycr3n.gif" alt="" /></a>
					<div class="headlineContent">
						<div class="headlineTxt">To Be Determined - Coming Soon</div>
						<div class="headlineSwitch">
							<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1on.gif" alt="" /></a>
							<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
							<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
							<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
							<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
						</div>
					</div>
				</div>
				
				<!-- headline 2 -->
				<div id="headline2" style="display: none;" >
					<a href=""><img src="http://i42.tinypic.com/aazxqh.gif" alt="" /></a>
					<div class="headlineContent">
						<div class="headlineTxt">To Be Determined - Coming Soon</div>
						<div class="headlineSwitch">
							<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
							<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2on.gif" alt="" /></a>
							<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
							<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
							<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
						</div>
					</div>
				</div>
				
				<!-- headline 3 -->
				<div id="headline3" style="display: none;" >
					<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
					<div class="headlineContent">
						<div class="headlineTxt">To Be Determined - Coming Soon</div>
						<div class="headlineSwitch">
							<a href="#javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
							<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
							<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3on.gif" alt="" /></a>
							<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
							<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
						</div>
					</div>
				</div>
				
				<!-- headline 4 -->
				<div id="headline4" style="display: none;" >
					<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
					<div class="headlineContent">
						<div class="headlineTxt">To Be Determined - Coming Soon</div>
						<div class="headlineSwitch">
							<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
							<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
							<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
							<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4on.gif" alt="" /></a>
							<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5.gif" alt="" /></a>
						</div>
					</div>
				</div>
				
				<!-- headline 5 -->
				<div id="headline5" style="display: none;" >
					<a href=""><img src="images/content/headlinepic.gif" alt="" /></a>
					<div class="headlineContent">
						<div class="headlineTxt">To Be Determined - Coming Soon</div>
						<div class="headlineSwitch">
							<a href="javascript:setImg(0)" onclick="switchHeadline('headline1');"><img src="images/icons/1.gif" alt="" /></a>
							<a href="javascript:setImg(1)" onclick="switchHeadline('headline2');"><img src="images/icons/2.gif" alt="" /></a>
							<a href="javascript:setImg(2)" onclick="switchHeadline('headline3');"><img src="images/icons/3.gif" alt="" /></a>
							<a href="javascript:setImg(3)" onclick="switchHeadline('headline4');"><img src="images/icons/4.gif" alt="" /></a>
							<a href="javascript:setImg(4)" onclick="switchHeadline('headline5');"><img src="images/icons/5on.gif" alt="" /></a>
						</div>
					</div>
				</div>
		
			</div>
			<!-- ending headlines -->

And again the site is www.tbdgaming.com, so if anyone could send me the HTML or non-executable java (no .jars to be added to directories) so that the pictures would rotate between eachother I'd really appreciate it. Also if there it a way to shorten the code I would appreciate it, as you can see its very long because its divided up so that each headline is separately coded to work when selected, but is there some way I can combine it into one compact space so that it functions the same but is shorter?

Pretty simple, I'm trying to me a slide show for my website (face in, 2.5 seconds later, fade out and move to the next one). I have a problem, I have tried everything to try and get the code working but I don't have a clue what the problem is.

Anyone tell me if you can spot any errors? I have managed to get the image to appear on my page but won't start the slide.

<html>
<body>

<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="Images\double.jpg"
var image2=new Image()
image2.src="Images\family.jpg"
var image3=new Image()
image3.src="Images\room.jpg"
//-->
</script>
</head>

<body>
<center><img src="Images\double.jpg" name="slide" width="500" height="456" /></center>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 1.0 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>

</body>
</html>

Hi

I have multiple images on my home page working in a slideshow as you can see at www.1bit.org.uk/yourhome

But, what I want is the same as what I have on this site:
http://www.villavacationsvip.com/viprestaurants.html

The difference is on that second slideshow, it uses flash. I don't want to use flash so is this possible to do?

Hi Guys

on this page
www.thepullmanlodge.co.uk/weddings.htm

the top 3 pictures are meant to slideshow into each other. When I preview the site in frontpage it works, but now I've uploaded it online it won't work and just shows the three pictures in a block.

Can anyone help me get this working as it should?

Thanks alot

John