slideshow button>img map

**ramartin** · 02-19-2006, 11:44 PM

Hello all, since this is my first post, yet me start by saying how much I enjoy Dynamic Drive web pages. You guys and gals are terrific!

OK, I found this most wonderful script. It's just what I was looking for. It can be found here:

http://www.dynamicdrive.com/dynamici...eloadslide.htm

I've created a sample web page using this script. As you will see below, I built an image table around the slideshow. You will also see I have created an image map from the bottom gif. What I want to do is to incorporate and eliminate the input buttons << and >> into my image map so that clicking on the back and next will control the slideshow. Is that possible? I hope I'm making myself clear.

http://rmartin.zboxhosting.net/FRAYE...tml/test1.html

thank you!

**jscheuer1** · 02-20-2006, 01:58 PM

Code:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>test1</title>
<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('http://rmartin.zboxhosting.net/FRAYEDcomic.html/comic7.GIF','http://rmartin.zboxhosting.net/FRAYEDcomic.html/background.gif','http://rmartin.zboxhosting.net/FRAYEDcomic.html/basedk.gif');

// 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;
 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>
</head>
<body width="100%" border="0" bgcolor="#b8c8fe" text="#000000" link="#990000" vlink="#ff0000" alink="#ff0000" onLoad="StartSlideShow()"><div align="center">
<form name="SlideShow">

<table border="0" cellpadding="0" and cellspacing="0" width="540"><tr><td><img src="http://rmartin.zboxhosting.net/FRAYEDcomic.html/topgif.gif" width="540"></td></tr></table>
<table border="0" cellpadding="0" and cellspacing="0" width="540"><tr><td><img src="http://rmartin.zboxhosting.net/FRAYEDcomic.html/leftstripe.gif" width="20"></td><td><form name="SlideShow">
<td><img name="Screen" width=500 height=400></td>
<td><img src="http://rmartin.zboxhosting.net/FRAYEDcomic.html/rightstripe.gif" width="20"></td></tr></table>
<table border="0" cellpadding="0" and cellspacing="0" width="540"><tr><td><img src="http://rmartin.zboxhosting.net/FRAYEDcomic.html/botpanel.gif" border=0 height=50 width=540 usemap="#mymap1"><map name="mymap1">
<area shape=rect coords="232,14,308,36"
href="http://rmartin.zboxhosting.net/FrayedEdges/frayedHome.html"><area shape=rect coords="132,14,208,36"
href="javascript:ShowSlide(-1);" onclick="ShowSlide(-1);return false;"><area shape=rect coords="332,14,408,36"
href="javascript:ShowSlide(1);" onclick="ShowSlide(1);return false;"></map></td></tr></table>
</form>

</body>
</html>

**ramartin** · 02-20-2006, 04:04 PM

Thanks John! You wrote the whole thing for me! I didn't expect that! Bonus! I could have messed around with it and I don't think I would have come up with the answer. It's so simple yet elegant. If you were here I would kiss you on the cheek, well, that is if you were a supermodel or something. Thank you so much. :-)

Thread: slideshow button>img map

Thread Tools

Search Thread

slideshow button>img map

Bookmarks

Bookmarks

Posting Permissions