SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Yet Another Post Requesting Help

    I have created most of the code however I would like to expand my options. Basically the code changes an image when a user makes a selection from a drop down menu.

    <head>
    Code:
    <script language="javascript">
    
    function linkrotate(which){
    var mylinks=new Array()
    mylinks[0]="http://www.#.com"
    mylinks[1]="http://www.#.com"
    mylinks[2]="http://www.#.com"
    
    window.location=mylinks[which]
    }
    
    
    function showimage()
    {
    if (!document.images)
    return
    document.images.pictures.src=
    document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
    }
    //-->
    </script>
    <body>
    Code:
    <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="image1.jpg">Option 1</option>
    <option value="image2.jpg">Option 2</option>
    <option value="image3.jpg">Option 3</option>
    </select></p>
    </form>
    What I would like to do it have two drop down menus that work together instead of one - providing a more accurate image for the user. Right now the user has one option to select from the drop down menu in which the image is changed. I'd like to be able to have the user choose from two drop down menus.

    For example:

    Drop down menu number 1
    Shoe Color: Black or Red

    Drop down menu number 2
    Shoelace Color: White or Brown

    Where a user chooses 'Black' from the first option then the images will only show a black shoe with white laces or brown laces (based on their choice from the next drop-down menu. Furthermore, where a user chooses 'Red' from the first option then image from the next choice will only show a red shoe with white or brown laces.

    Suggestions? Guidance? Help?

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm trying to keep it simple. This certainly isn't the most flexible approach. In particular this might not work well if, for example, a green shoe doesn't have an image for black laces. You would need to have an image for every possible combination.

    Make two functions, getShoeColor() and getLaceColor(). The functions should look at the proper select menu, and then return a string for whatever is chosen in that menu.

    Then, you can use a naming convention for your image files.
    shoeColor_laceColor.jpg

    So, for black shoe with white laces
    black_white.jpg

    In your showimage() function, you can call the other two functions to get the data you need to craft the proper filename. Just concatenate the strings together.

    Code JavaScript:
    var shoeColor = getShoeColor();
    var laceColor = getLaceColor();
    var filename = shoeColor + "_" + laceColor + ".jpg";
     
    //uncomment to test the value if needed
    //alert(filename);

    Give it a shot. Make sure you use unique names, and don't forget the use the onChange event for the other select menu.


Bookmarks

Posting Permissions

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