Problemet med <input type> buttom - image
Hej Eksperter,Jeg er igang med at lave et slideshow af billeder til min hjemmeside. Og var ret træt af at hver gang jeg skulle trykke på knappen "næste billede". Så skulle den første opdaterer hele hjemmesiden. Så derfor fandt jeg en Javascrip kode som faktisk fungere som den skal. Pånær at jeg gerne vil have rettet knapper fra <input type="button"> til <input type"image">.. Hvilket jeg som signet har jeg problemet med.
Nogle forslag til hvordan jeg kan løse problemet?
Min kode ser således ud:
<script language="JavaScript">
//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit http://www.dynamicdrive.com
// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('billeder/pic1.jpg','billeder/pic2.jpg','billeder/pic3.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);
}
</script>
<form name="SlideShow">
<div class="boks_1">
<img name="Screen">
</div>
<div class="boks_2">
<input type="button" name="Previous" value=" << " onClick="ShowSlide(-1)">
<input type="button" name="Next" value=" >> " onClick="ShowSlide(1)">
</div>
</form>
<body onLoad="StartSlideShow()">
<div class="boks_3">
<img style="margin:0px 15px 0px 15px;" src="billeder/left.jpg" />
<img src="billeder/right.jpg" />
</div>
