Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I include 2 or more javascriptkit image selectors in one html page?

    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
    Last edited by scavanger34; 05-09-2004 at 03:03 AM.

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    May 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks, how might i apply one to all of the forms, and allow differnt pictures...

    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.

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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">

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or without the function:

    Code:
    <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">

  • #6
    New to the CF scene
    Join Date
    May 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you so much!!!

    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

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •