Question

**cameronnat** · 01-29-2006, 01:37 AM

In this code how would I go about making the images have URL's Attached to them?

**jscheuer1** · 01-29-2006, 02:52 AM

Yes, that's one way. What exacatly are you trying to do?

**sleipner** · 01-29-2006, 03:00 AM

I think he wants to make a link out of the pictures, if it was html, it would be easy, but since its js, the only thing I would be able to figure out how to do is to make the link on the html img tag, but it wouldnt change with the slides...

**jscheuer1** · 01-29-2006, 08:06 AM

Thanks, sleipner, I misread the question the first time, I thought the first word was 'Is', not 'In'. With that in mind, my first response makes some sense. Anyways, the quickest way to adapt the script would be to add another array for the links (additions red):

Code:

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array('image1.gif','image2.gif','image3.gif');
// PUT THE URL's OF YOUR LINKS INTO THIS ARRAY...
var URLS = new Array ('http://www.dynamicdrive.com', 'http://www.google.com', 'http://www.yahoo.com');

Then, find this line and add the one below it, also shown in red:

Code:

            document.images['Screen'].src = Slides[NextSlide].src;
            document.images['Screen'].parentNode.href = URLS[NextSlide];

Finally, in the body part of the script (additions red):

Code:

<td colspan=2><a href="javascript:void(0);"><img name="Screen" width="108" height="135" border="0"></a></td>

**cameronnat** · 01-29-2006, 07:10 PM

I tried the first one but it doesn't seem to want to work. Is it because the link to the image doesn't end in gif or jpg, etc? See What I am trying to do is have my voting links(with their images) on my blog. I want them to beable to click through the images to choose whichever link they'd like to use to vote. Am I making any sense?

Code:

<HTML>
   <HEAD>
      <TITLE>Empty File</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://www.blogtop100.com/button.php?id=211','','');

// PUT THE URL's OF YOUR LINKS INTO THIS ARRAY...
var URLS = new Array ('http://www.blogtop100.com/in.php?id=211', '', '');

// 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;
            document.images['Screen'].parentNode.href = URLS[NextSlide];
            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>
      <form name="SlideShow">
<table>
<tr>
   <td colspan=2><a href="javascript:void(0);"><img name="Screen" width=108 height=135></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>  </BODY>
</HTML>