HTML - Slideshow - Why It Does Not Work, Can Someone Help?

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

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

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?

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.

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

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?

I am having problem aligning text next to a javascript slideshow in a table. I can't get text to sit next to the show. It always goes on the top or bottom. Please, any help?

Hello,

IE is messing things up for me yet again, lets start with the solutions ive tried:


http://homepage.ntlworld.com/bobosola/pnghowto.htm
http://koivi.com/ie-png-transparency/
http://www.twinhelix.com/css/iepngfix/


They are all failing? Im guessing its because of the slideshow theyre in..

Could someone give me some advice here? Have a look at the site, in your Internet Explorer ofcourse, here. Thankyou.

so im trying to put a slide show in the div overly...im putting it in the right section but when i view my profile its right in the middle of the page overlapping writing etc..
how do i get it so its under that heading i put it up instead of it center?

heres my code

ABOUT ME:

<style> body table {margin-top:-50000px;}body td table, body div table {margin-top: 0;}table, tr, td {background-color:transparent;}body div table form{display:none;}body table div form{display:block;}div table td font {visibility:hidden; }a.navbar:active, a.navbar:visited, a.navbar:link { display:none;}a.navbar:hover { display:none; }.navbar {visibility:hidden; display:none;} .userProfiledetail, .userProfileURL, .userProfileSchool, .interestsAndDetails, .friendsComments,.extendedNetwork, .latestBlogEntry, .friendSpace, .orangetext15, .navigationbar, .profileInfo, .contacttable { display:none;} a.text, table div font a, table div div {visibility:hidden;} table tr td div font {display: none;} body div table td form {display:none!important;}table, td, tr{ background-color:transparent;}td td embed, td td object {position:absolute; left:0px; top:0px; width:260px; height:47px;}td.text embed {width:260px; height:38px;}td.text embed, td.text object {width:260px; height:38px;}

h1 {
font-family: Time New Roman;
font-size: 20pt;
color: ffffff;
font-weight: normal;
border-bottom: 3px double;
border-color: ff3399;
text-align: right;}

h2 {
font-family: Time New Roman;
font-size: 20pt;
color: ffffff;
font-weight: normal;
border-bottom: 3px double;
border-color: ff3399;
text-align: left;}

b {
color: fff;
font-weight: bold;
text-transform: none;}

i {
color: fff;
font-style: italic;
font-weight: normal;
text-transform: lowercase; }

u {font-family: Arial;
font-size: 11pt;
color: fff;
text-decoration: underline;
border-bottom: 1px solid;
border-color: ff3399;}

strike {
font-size: 10pt;
color: fff;
font-style: strikethrough; }

big, small {
color: fff;}

textarea, select, input {
font-family: Arial;
color: fff;
background-color: ff3399;
border: 1px solid fff;
letter-spacing: -1px; }

blockquote {
background-color: transparent;
border: 1px solid;
border-color: ff3399;
padding: 5px;}

body {
background-color: 000000;
background-image: url("http://cbimg6.com/layouts/08/08/30432aa.jpg");
background-repeat: repeat-y;
background-position: center;

scrollbar-face-color: ff3399;
scrollbar-arrow-color: fff;
scrollbar-track-color: 333;
scrollbar-shadow-color: 000;
scrollbar-highlight-color: 777;
scrollbar-3dlight-color: fff;
scrollbar-darkshadow-color: 000;}

.navi:link, .navi:active, .navi:visited {
font-family: Verdana;
font-weight: normal;
font-size: 8pt;
color: ffffff;
text-transform: uppercase;
text-decoration: none;
background-color: ff3399;
display: block;
text-align: center;}

.navi:hover {
font-family: Verdana;
font-weight: normal;
font-size: 7pt;
color: ff3399;
text-transform: uppercase;
text-decoration: none;
background-color: ffffff;
display: block;
text-align: center;}

a:link, a:active, a:visited {
font-family:Arial;
font-weight: normal;
font-size: 11pt;
color: ff3399;
text-transformation: none;
text-decoration: none;
background-color: none;}

a:hover {
font-family: Arial;
font-weight: normal;
font-size: 11pt;
color: ffffff;
text-transformation: none;
text-decoration: none;
background-color: ff3399;}

.right {position: absolute; top: 380; left: 50%; margin-left: -143px; height:; width: 563; font-family: Arial; font-size: 12pt; color: cccccc; background-color: transparent; text-align: justify;}

.left {position: absolute; top: 375; left: 50%; margin-left: -365px; height:; width: 170px; font-family: Arial; font-size: 12pt; color: cccccc; background-color: transparent; text-align: justify;}

.base {position: absolute; top: 0px; left: 50%; margin-left: -497px;}

</style>




WHO ID LIKE TO MEET?

<div class="base"><img src="http://cbimg6.com/layouts/08/08/30432ab.jpg" /></div>

<div class="right">
<h1>Spotlight on me.</h1>
<center><br /><img src="http://i31.tinypic.com/116nhwy.jpg" border="0" alt="Image and video hosting by TinyPic" /></a><br /></center>
Best daughters in the world; <b>Allie & Stephie</b>, <u>my kids</u>; Steps Dance studio (Hip Hop Instructor) is the job; I am a dancer - i live it love it am it; dancing is a very big apart of my life that and i want to pass that same love to my girls ; Merced College is the school Nursing is the major; i <b><u>LOVE</b></u> anything PINK; I &hearts; my girls; I &hearts; my friends; I &hearts; beer; I &hearts; drinking at applebees; I &hearts; Rap & R&b; I &hearts; late nights; I &hearts; romance movies ; I &hearts; A Walk to Remember; I &hearts; Tattoos; I ♥ coors light; I &hearts; the RAIDERS; I &hearts; my bff amanda always; I &hearts; Mac Make-up; I &hearts; getting my nails done; I &hearts; drinking @ La Ha 2 haha<br /><br /><br />

I hate people who lie; I hate cheaters; I hate broken promise's; I hate caring so ****in much; I hate having a big heart; I hate fights; I hate onions and mushrooms; I hate clowns; I hate traffic; I hate dark beer; I hate tomatos; and that sums me up in a nut shell body

<h1>Welcome To the Show.</h1>
<img src="http://i38.tinypic.com/11kgl8m.jpg" align="left" /><b>Name:</b> Kelley Kellz<br />
<b>Age:</b> 24<br />
<b>Location:</b> merced; califoRnia.<br />
<b>Status:</b> call it what you want.<br />
<b>Occupation:</b> dance instructor; school.<br />
<br /><br />
<br /><br /><br />


<h1>Backstage Pass.</h1>
<p style="visibility:visible;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="320" width="426" style="width:426px;height:320px" data="http://widget-af.slide.com/widgets/slideticker.swf">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://widget-af.slide.com/widgets/slideticker.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="l" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="cy=ms&il=1&channel=2666130979412675759&site=widget-af.slide.com" />
</object>



under "backstage pass"
thats where i want the slideshow but it wont put it under there nor under the "welcome to the show" area

what am i doing wrong?

Hi all,

I cant seem to manage to put links to the slideshow I'm using.

http://fifthmammoth.co.uk/slideshow/example4.html

This doesn't appear to work:

Code:

   <div id="slide_01">
<div id="myShow-1" class="slide-show">
           
           <div class="slide first">
               
               <a href="pro_scherm/index.html"><img alt="" src="slideshow2/images/slide_01.jpg" width="300" height="200">
             <div class="slide-caption">plaatje 1</div></a>
  </div>
            <div class="slide">
                <img src="slideshow2/images/slide_02.jpg" width="300" height="200">
                <div class="slide-caption">plaatje 2</div>
      </div>
  <div class="slide">
                <img src="slideshow2/images/slide_03.jpg" width="300" height="200">
                <div class="slide-caption">plaatje 3</div>
  </div>
</div>

Another thing I'd like to accomplish, to make a link between the slideshow in the mainscreen, and the menubar below. Ideally, if you rollover the slideshow, the matching project in the menubar below lightens. Is it possible to create a rollover effect like this?

Your help would be really appreciated!

Hello,
i am trying to implement a basic slideshow on my website. My code is as follows:

<img id="img1" height="500" src="" width="500" />

<a href="javascript:moveToNextSlide()">Next</a>

<script type="text/javascript">>

var index=31;

function moveToNextSlide()
{
var slideName="slideshowimages/IMG_00" + index++ + ".jpg";
var img1 = document.getElementById("img1");
img1.src = slidename;
}

moveToNextSlide();
</script>


each image is called IMG_00 followed by a number from 31-41 .jpg. when i view the page the image doesn't appear, there is just a small red cross in a white box and the next function doesn't work.Please can someone help me!
Cheers,
Peter

i can open the popup but when i try to open the image i cant see it because he comes to back i want a little help here plz. I am doing a job for school i am a amauter on html


http://www.datafilehost.com/download-fc6cb3ce.html

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>

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?