Two Image Previewers on same page [Archive]

Click to See Complete Forum and Search --> : Two Image Previewers on same page

Zakk

06-02-2003, 07:21 PM

I am trying to have more than one of this image previewer, however I can only get one to function at a time (whatever is the first one listed). Is there a way to make this happen? I want to be able to group my images and have 2 or 3 of this previewer to allow people to browse them. THanks!

http://javascript.internet.com/miscellaneous/image-previewer.html

Jona

06-02-2003, 09:52 PM

It's simple. Just look in the code and change the name of the function and create a new one with the same thing in it. Then just change the selected image that changes SRC and the values, etc., in your SELECT drop down menu.

Jona

Zakk

06-03-2003, 07:39 AM

I have tried your suggestions, however am still not having any luck. The new set of images won't change when I select a different one from the drop down, and of course will not "show" either after clicking the "Show Image." Could you post an example so I can check that I have everything looking right?

Khalid Ali

06-03-2003, 08:36 AM

Simplest and logical solutionis to just change the name of the select box,for example first frop downs name attribiute is

name = "preview_1"

then make this nake attribute for the second one as

name = "preview_2"

you only have to make sure thatyou pass the correct reference to the current drop down to the function that displays the pic...

Zakk

06-03-2003, 08:48 AM

I'm pretty sure I'm on point with what you're saying, but it's still not cooperating...

Here's the head:

</script>


</script>

Here's the body:
<center>
<form name=picform>
<select name=selbox size=1 onChange="previewPic(this)">
<option value="http://xml.pc-sports.net/seahawks/images/ingame/alextd.gif">Alexander Scores
<option value="http://xml.pc-sports.net/seahawks/images/ingame/alexspin.gif">Wicked Spin Move
<option value="http://xml.pc-sports.net/seahawks/images/ingame/hearstupend.gif">Big Hit
<option value="http://xml.pc-sports.net/seahawks/images/ingame/garciahit.gif">Garcia Goes Down...Again
<option value="http://xml.pc-sports.net/seahawks/images/ingame/dilferhit.gif">Dilfer Hit
<option value="http://xml.pc-sports.net/seahawks/images/ingame/jackson49ers.gif">Tight Fit
<option value="http://xml.pc-sports.net/seahawks/images/ingame/kacydeflection.gif">Defensive Dominance
<option value="http://xml.pc-sports.net/seahawks/images/ingame/holmgren49ers.gif">Head Coach Mike Holmgren
</select>
<p>
<img name="previewpic" src="http://xml.pc-sports.net/seahawks/images/ingame/alextd.gif" width=175 height=140 border=1>
<p>
<input type=button value="Show Image" onclick="showPic(this.form.selbox)">
</form>
</center>

<center>
<form name=picform>
<select name=selbox size=1 onChange="previewPic1(this)">
<option value="http://xml.pc-sports.net/seahawks/images/ingame/alexsuper.gif">Superman
<option value="http://xml.pc-sports.net/seahawks/images/ingame/tomfirstday.gif">Tomlinson's first day
</select>
<p>
<img name="previewpic1" src="http://xml.pc-sports.net/seahawks/images/ingame/alexsuper.gif" width=175 height=140 border=1>
<p>
<input type=button value="Show Image" onclick="showPic(this.form.selbox)">
</form>
</center>

Jona

06-03-2003, 09:37 AM

</script>

<center>
<form name=picform>
<select name=selbox size=1 onChange="previewPic(this)">
<option value="http://xml.pc-sports.net/seahawks/images/ingame/alextd.gif">Alexander Scores
<option value="http://xml.pc-sports.net/seahawks/images/ingame/alexspin.gif">Wicked Spin Move
<option value="http://xml.pc-sports.net/seahawks/images/ingame/hearstupend.gif">Big Hit
<option value="http://xml.pc-sports.net/seahawks/images/ingame/garciahit.gif">Garcia Goes Down...Again
<option value="http://xml.pc-sports.net/seahawks/images/ingame/dilferhit.gif">Dilfer Hit
<option value="http://xml.pc-sports.net/seahawks/images/ingame/jackson49ers.gif">Tight Fit
<option value="http://xml.pc-sports.net/seahawks/images/ingame/kacydeflection.gif">Defensive Dominance
<option value="http://xml.pc-sports.net/seahawks/images/ingame/holmgren49ers.gif">Head Coach Mike Holmgren
</select>
<p>
<img name="previewpic" src="http://xml.pc-sports.net/seahawks/images/ingame/alextd.gif" width=175 height=140 border=1>
<p>
<input type=button value="Show Image" onclick="showPic(this.form.selbox)">
</form>
</center>

<center>
<form name=picform2>
<select name=selbox size=1 onChange="previewPic2(this)">
<option value="http://xml.pc-sports.net/seahawks/images/ingame/alexsuper.gif">Superman
<option value="http://xml.pc-sports.net/seahawks/images/ingame/tomfirstday.gif">Tomlinson's first day
</select>
<p>
<img name="previewpic2" src="http://xml.pc-sports.net/seahawks/images/ingame/alexsuper.gif" width=175 height=140 border=1>
<p>
<input type=button value="Show Image" onclick="showPic2(this.form.selbox)">
</form>
</center>

Jona

Zakk

06-03-2003, 10:01 AM

I was actually pretty darn close at one point and didn't realize it. Still kinda new at js and didn't even think to combine the header info. Thanks guys!

Jona

06-03-2003, 10:03 AM

Whew! It wasn't the fastest thing I've ever done, but I'm glad it worked for you. ;)

Just a note, though, you might want to replace <center> with <div align="center"> to make the HTML more valid.. See The W3C Validator (http://validator.w3.org/).

Jona