Dynamic image selector

[orbitty]

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

I like this script very much, however I believe there's one essential thing missing....
Please can any one tell me how I can add a link to the images ?

(and how come Dreamweaver MX 2004 crashes everytime when I try to edit the page with the current script??)

Thank you very much in advance !

[hayley28]

yes! i was just going to post exactly the same thing because i wanted this............

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

and have links to the images and i really would love it if some could help me!!!

thank you so so much if anyone can! xx

[jscheuer1]

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

I like this script very much, however I believe there's one essential thing missing....
Please can any one tell me how I can add a link to the images ?

(and how come Dreamweaver MX 2004 crashes everytime when I try to edit the page with the current script??)

Thank you very much in advance !

Use a text editor to edit scripts. You may even have to go so far as maintaining separate versions of the page, one without the script for use in Dreamweaver and one that is the finished version with the script that only gets edited in a text editor. Here are the changes you can make to the Dynamic image selector script to allow for robust linking options, first add this style block to the head:

<style type="text/css">

#link {
text-decoration:none;
display:block;
color:black;
width:225px;
}

#link img {
border:none;
}

#link:hover {
color:blue;
}

</style>

You can edit the property/value pairs to suit. Next, replace the description array with this one:

//enter image descriptions, links ("" for blank)
var description=new Array()
description[0]=["DHTML: The Definitive Guide", "href='http://www.google.com'"] //simple link
description[1]=["DHTML Visual QuickStart Guide", "href='http://www.dynamicdrive.com' target='_blank'"] //link w/target
description[2]=["HTML 4 and DHTML", ""] //no link
description[3]=["IE5 DHTML Reference", "href='javascript:alert(\"Hi!\")'"] //link as javascript event

Find this line in the script:

contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>'

Replace it with this one:

contentobj.innerHTML='<center><a '+(description[tempobj.options.selectedIndex][1]!==""? 'id="link" ' : '')+description[tempobj.options.selectedIndex][1]+'><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex][0]+'</a></center>'

Finally, to maintain NS4 compatibility, change this line:

document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>')

to this:

document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex][0]+'</center>')

[jscheuer1]

yes! i was just going to post exactly the same thing because i wanted this............

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

and have links to the images and i really would love it if some could help me!!!

thank you so so much if anyone can! xx

For the Preloaded Slide Show Script, things are a bit different. Add this style block to the head:

<style type="text/css">
#link img{
border:none;
}
</style>

Add this array below the 'Slides' array:

var imglinks = new Array('http://www.google.com','http://www.dynamicdrive.com','http://www.yahoo.com');

Add these lines (highlighted red) as indicated:

function ShowSlide(Direction) {
var imglink=document.getElementById? document.getElementById('link') : document.all.link;
   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;
            imglink.href=imglinks[NextSlide]
            CurrentSlide = NextSlide++;
            Message = 'Picture ' + (CurrentSlide+1) + ' of ' + 
Slides.length;
            self.defaultStatus = Message;
            if (Direction == 1) CacheNextSlide();
      }
      return true;
   }
}

Finally, in the markup add the red highlighted parts:

<td colspan=2><a id="link"><img name="Screen" width=108 height=135></a></td>

[orbitty]

Perfect!

First of all : Happy New Year !!
and thank you very much for your help!

Regards,
Jerome

[hayley28]

thank you so much! i was just wondering, can you put this image selector on your page more than once? because i was hoping to but ive tried to but then all my images dont work....sorry to bother you again but if you know id love you to tell me!

thanks in advance! xx

[hayley28]

anyone? lol x

[Twey]

Note: Questions regarding multiple script usage are not usually replied to due to their time consuming nature. See this thread for more information, and this tutorial for one possible solution.

[jscheuer1]

That won't get it in this case. Because the question here is how to get two copies of the same script to work on one page. The easiest way (with this sort of script) is to put one script on the first page and another on a separate second page. Then have the second page show through onto the first page via an iframe.