...

View Full Version : How do I include 2 or more javascriptkit image selectors in one html page?



scavanger34
05-08-2004, 10:49 AM
I am trying to include 4 of the Java Script Kit Image Selector I script in my site:
http://www.lurkerbeanies.com/httpdocs/lurkertest.html

I got one to work, and although I'm almost clueless about how this works, if someone could be so kind as to tell me how to make 2 of this same script work in one html page, I think I could figure out what to change to get the third and fourth ones to work. By this I mean, I have four different forms, each with their own set of options, and they correspond with four different images fields.
In the above example, I want them to be able to pick from a list of 17 colors, when they pick a color, the image of taht color shows up. In the next field, there are 17 color options, and when they pick one, an image appears below that form box, (seperate from the previous), and then that happens two more times. If i apply the same script to each form, won't the images be the same no matter what form box says...? That sounds neive.


Included is the script, twice. I'm puting each form in it's own table in my html page. For an example of how i'm trying to make this whole thing work, check out the site above. I really appreciate any help you can give, but unfortunately, when you say change the variables and the form names, and the functions, etc etc, I will get kind of lost. In the example, I will put an example of what i have tried so far.

hope this isn't too confusing:

(1)---------------------------------

<script language="javascript">
<!--

/*Combo Box Image Selector:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="me.gif">Picture of me</option>
<option value="myaunt.gif">Picture of my aunt</option>
<option value="brother.gif">Picture of my brother</option>
</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="me.gif" name="pictures" width="99"
height="100"></td>
</tr>
</table>

(2)--------------------------------------

<script language="javascript">
<!--

/*Combo Box Image Selector:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

function showimage()
{
if (!document.images)
return
document.images.pictures2.src=
document.mygallery2.picture2.options[document.mygallery2.picture2.selectedIndex].value
}
//-->
</script>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery2"><p><select
name="picture2" size="1" onChange="showimage()">
<option selected value="me.gif">Picture of me</option>
<option value="myaunt.gif">Picture of my aunt</option>
<option value="brother.gif">Picture of my brother</option>
</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="me.gif" name="pictures2" width="99"
height="100"></td>
</tr>
</table>



Notice: the number 2 added to particular parts in the second copy of the script. I also tried adding a 2 to the showimage() part [ie: showimage2()]

So if there is anything I'm missing (which I'm sure there is) I really REALLY appreciate any help.

Thanks guys.

-A

Garadon
05-08-2004, 11:10 AM
putting to on both occurences of showimage in 2nd script should make it work, it would however be more more wise to make the one script applicable to all the forms.

scavanger34
05-09-2004, 03:05 AM
Thanks,

But how might i apply the one scripte to all of the forms and still allow different pictures to appear in the four different spot (as seen on the page)?

Again, all the help, thank you SO much.

Willy Duitt
05-09-2004, 03:31 AM
<script type="text/javascript">
<!--//
function showimage(which,picture){
if(document.images){
document.images[which].src = picture;
}
}
//-->
</script>
</HEAD>

<BODY>
<form>
<select size="1" onChange="showimage('pictures1',this.value)">
<option selected value="me.gif">Picture of me</option>
<option value="myaunt.gif">Picture of my aunt</option>
<option value="brother.gif">Picture of my brother</option>
</select><br>
<img src="me.gif" name="pictures1" width="99" height="100">
<br>



<select size="1" onChange="showimage('pictures2',this.value)">
<option selected value="me2.gif">Picture of me2</option>
<option value="myaunt2.gif">Picture of my aunt2</option>
<option value="brother2.gif">Picture of my brother2</option>
</select>
</form>
<img src="me2.gif" name="pictures2" width="99" height="100">

Willy Duitt
05-09-2004, 03:35 AM
Or without the function:


<BODY>
<form>
<select size="1" onChange="document.images['pictures1'].src=this.value">
<option selected value="me.gif">Picture of me</option>
<option value="myaunt.gif">Picture of my aunt</option>
<option value="brother.gif">Picture of my brother</option>
</select><br>
<img src="me.gif" name="pictures1" width="99" height="100">
<br>



<select size="1" onChange="document.images['pictures2'].src=this.value">
<option selected value="me2.gif">Picture of me2</option>
<option value="myaunt2.gif">Picture of my aunt2</option>
<option value="brother2.gif">Picture of my brother2</option>
</select>
</form>
<img src="me2.gif" name="pictures2" width="99" height="100">

scavanger34
05-10-2004, 07:14 AM
That worked great. And I learned a little something, thank you guys for all your help.

Both ways worked great...

I actually have another little question if you'd be willing to help out some more:

I was wondering if it is possible to give two values to one option. I think that makes sense.

Right now, and image pops up below where the forms are, I was wondering if it was possible to have a seperate image pop up in a different place (different table in fact) in addition to the image that already pops up when a particular option is chosen.

make sense? if not, let me know, and I'll try to clarify.

But again, THANK YOU, you guys kick!

aaron

Willy Duitt
05-10-2004, 08:44 AM
<script type="text/javascript">
<!--//
function showimage(which,picture){
if(picture.indexOf('|') > -1){
var image = picture.split('|');
document.images[which].src = image[0];
document.images['tableImage'].src = image[1];
}

else{ document.images[which].src = picture };
}
//-->
</script>
</HEAD>

<BODY>
<form>
<select size="1" onChange="showimage('pictures1',this.value)">
<option selected value="me.gif">Picture of me</option>
<option value="myaunt.gif|myuncle.gif">Pictures of my aunt & uncle</option>
<option value="brother.gif">Picture of my brother</option>
</select><br>
<img src="me.gif" name="pictures1" width="99" height="100">
<br>

<select size="1" onChange="showimage('pictures2',this.value)">
<option selected value="me2.gif">Picture of me2</option>
<option value="myaunt2.gif">Picture of my aunt2</option>
<option value="brother2.gif">Picture of my brother2</option>
</select>
</form>
<img src="me2.gif" name="pictures2" width="99" height="100">

<table><tr><td>
<img name="tableImage" src="default.gif">
</td></tr></table>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum