alia
01-25-2003, 08:19 PM
I have my script preety well set I think, accept for the images!! The first image shows up, but all the following ones are those bothersome little X's. Here is the script I am using:
In my <head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Ricocheting (ricocheting@hotmail.com) -->
<!-- Web Site: http://www.ricocheting.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
in the <Body>
<center>
<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#996666">
<tr>
<td align=center bgcolor="white">
<FONT FACE="georgia, times new roman, times, serif" SIZE="2" COLOR="#996666"><b>Layout Slideshow</b></FONT>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=200 height=150>
<img src="photo1.jpg" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="#996666">
<select name="slide" onChange="change();">
<option value="servicedemo1.jpg" selected>Music
<option value="servicedemo2.jpg">Sandpaper Kisses
<option value="servicedemo3.jpg">Langauge of the Soul
<option value="servicedemo4.jpg">Addison Joy
<option value="servicedemo5.jpg">In the Bedroom
<option value="servicedemo6.jpg">Woods Walk
<option value="servicedemo7.jpg">Positive
<option value="servicedemo8.jpg">War Heros
<option value="servicedemo9.jpg">Deep Blue Sea
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#996666">
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</form>
</center>
I know I have my image codes directed corectly. If seeing the page and veiwing the source would help, here is the link
http://www.scrapbookingservice.com/slideshow.html
maybe I have my head and body placed wrong? I really can't figure it out. I have been pulling my hairout all day. Thanks to anyone who can point me in the right direction.
In my <head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Ricocheting (ricocheting@hotmail.com) -->
<!-- Web Site: http://www.ricocheting.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
in the <Body>
<center>
<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#996666">
<tr>
<td align=center bgcolor="white">
<FONT FACE="georgia, times new roman, times, serif" SIZE="2" COLOR="#996666"><b>Layout Slideshow</b></FONT>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=200 height=150>
<img src="photo1.jpg" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="#996666">
<select name="slide" onChange="change();">
<option value="servicedemo1.jpg" selected>Music
<option value="servicedemo2.jpg">Sandpaper Kisses
<option value="servicedemo3.jpg">Langauge of the Soul
<option value="servicedemo4.jpg">Addison Joy
<option value="servicedemo5.jpg">In the Bedroom
<option value="servicedemo6.jpg">Woods Walk
<option value="servicedemo7.jpg">Positive
<option value="servicedemo8.jpg">War Heros
<option value="servicedemo9.jpg">Deep Blue Sea
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#996666">
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</form>
</center>
I know I have my image codes directed corectly. If seeing the page and veiwing the source would help, here is the link
http://www.scrapbookingservice.com/slideshow.html
maybe I have my head and body placed wrong? I really can't figure it out. I have been pulling my hairout all day. Thanks to anyone who can point me in the right direction.