Bild-script

Jag har ett litet bild-script som funkar fint. Dock fungerar det ej om jag vill byta ut knapparna mot bilder. Nån som vet hur man ska göra?

<form name="SlideShow">
<table>
<tr>
<td colspan=2><img name="Screen" width=200 height=150></td>
</tr>
<tr>
<td><input type="button" name="Previous" 
value=" << "
onClick="ShowSlide(-1)"></td>
<td align="right"><input type="button" name="Next"
value=" >> " onClick="ShowSlide(1)"></td>
</table>
</form>

Så här ser själva scriptet ut...mycket kod...

//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit [url]http://www.dynamicdrive.com[/url]

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('img/ljungby_folk.gif','img/Carolina_Mattias.jpg','img/Carolina_Mattias.jpg');

// DO NOT EDIT BELOW THIS LINE!
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
   var ImageObject = new Image();
   ImageObject.src = ImageSource;
   return ImageObject;
}

function ShowSlide(Direction) {
   if (SlideReady) {
      NextSlide = CurrentSlide + Direction;
      // THIS WILL DISABLE THE BUTTONS (IE-ONLY)
      document.SlideShow.Previous.disabled = (NextSlide == 0);
      document.SlideShow.Next.disabled = (NextSlide == 
(Slides.length-1));    
 if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
            document.images['Screen'].src = Slides[NextSlide].src;
            CurrentSlide = NextSlide++;
            Message = 'Picture ' + (CurrentSlide+1) + ' of ' + 
Slides.length;
            self.defaultStatus = Message;
            if (Direction == 1) CacheNextSlide();
      }
      return true;
   }
}

function Download() {
   if (Slides[NextSlide].complete) {
      SlideReady = true;
      self.defaultStatus = Message;
   }
   else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
   return true;
}

function CacheNextSlide() {
   if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] == 
'string'))
{ // ONLY CACHES THE IMAGES ONCE
      SlideReady = false;
      self.defaultStatus = 'Downloading next picture...';
      Slides[NextSlide] = CacheImage(Slides[NextSlide]);
      Download();
   }
   return true;
}

function StartSlideShow() {
   CurrentSlide = -1;
   Slides[0] = CacheImage(Slides[0]);
   SlideReady = true;
   ShowSlide(1);
}

Ok, strunt i knapparna, de får vara. Men nu ett nytt problem..hur får jag bilderna länkade?

Detta borde fungera:

<script language="JavaScript"> 

//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit [url]http://www.dynamicdrive.com[/url]

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('img/ljungby_folk.gif','img/Carolina_Mattias.jpg','img/Carolina_Mattias.jpg');
var slidelinks=new Array("http://www.dynamicdrive.com","http://wsabstract.com","http://www.geocities.com")
var whichlink=0

// DO NOT EDIT BELOW THIS LINE!
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
   var ImageObject = new Image();
   ImageObject.src = ImageSource;
   return ImageObject;
}

function ShowSlide(Direction) {
   if (SlideReady) {
      NextSlide = CurrentSlide + Direction;
      // THIS WILL DISABLE THE BUTTONS (IE-ONLY)
      document.SlideShow.Previous.disabled = (NextSlide == 0);
      document.SlideShow.Next.disabled = (NextSlide == 
(Slides.length-1));    
 if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
            document.images['Screen'].src = Slides[NextSlide].src;
            CurrentSlide = NextSlide++;
            Message = 'Picture ' + (CurrentSlide+1) + ' of ' + 
Slides.length;
whichlink=NextSlide-1;
            self.defaultStatus = Message;
            if (Direction == 1) CacheNextSlide();
      }
      return true;
   }
}

function Download() {
   if (Slides[NextSlide].complete) {
      SlideReady = true;
      self.defaultStatus = Message;
   }
   else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
   return true;
}

function CacheNextSlide() {
   if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] == 
'string'))
{ // ONLY CACHES THE IMAGES ONCE
      SlideReady = false;
      self.defaultStatus = 'Downloading next picture...';
      Slides[NextSlide] = CacheImage(Slides[NextSlide]);

      Download();
   }
   return true;
}

function StartSlideShow() {
   CurrentSlide = -1;
   Slides[0] = CacheImage(Slides[0]);
   SlideReady = true;
   ShowSlide(1);
}

function link() {
window.location=slidelinks[whichlink]

}
</script> 

<body onLoad="StartSlideShow()">

<form name="SlideShow">
<table>
<tr>
<td colspan=2><a href><img name="Screen" width=200 height=150 onclick="link()"></A></td>
</tr>
<tr>
<td><input type="button" name="Previous" 
value=" << "
onClick="ShowSlide(-1)"></td>
<td align="right"><input type="button" name="Next"
value=" >> " onClick="ShowSlide(1)"></td>
</table>
</form>

Vill du ha bilder får du ändra till:

<input type="image" name="Previous" SRC="leftarrow.gif" onClick="ShowSlide(-1)">

å liknande på den andra, samt att du måste nog utkommentera eller ta bort raderna:

      document.SlideShow.Previous.disabled = (NextSlide == 0);
      document.SlideShow.Next.disabled = (NextSlide == (Slides.length-1));

Tusen tack, båda dina lösningar funkade fint!!

Kortvarig lycka..nu strular det. Länkarna funkar bra men knappbilderna vill inte. Inget händer när jag klickar på pilarna, den första bilden laddas bara om igen :(. Nån idé om vad felet kan vara? Synd för det såg så snyggt ut med andra knapper.