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 4 of 4

Thread: onChange

  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onChange

    Alright. I want to make an onchange image thing; where someone can select a name from a form and it will display an image.

    I want the form to have two options.

    They can pick a MALE or FEMALE version (these two things in one box)
    and below it, they can pick different PET versions of it.

    So:

    1st box: male, female
    2nd box: pet one, pet two, pet three, etc

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Search for "javascript image rollovers", that will show you how to do it with onmouseover and onmouseout events.

    Then, you can change the script, remove the onmouseout/rollout portion, and wire up the image changing to onchange on the select boxes.

    Try some stuff out, then post your code with some targetted questions.

  • #3
    JUD
    JUD is offline
    New Coder
    Join Date
    Jul 2005
    Location
    I'm right here
    Posts
    92
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I think this is what your after

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>Pet Chooser</title>
    <
    script type="text/javascript">
        
    // <![CDATA[ //
            
    function swapImage(){
                var 
    gen document.forms[0].gender.options[document.forms[0].gender.selectedIndex].value;
                var 
    pet document.forms[0].pet.options[document.forms[0].pet.selectedIndex].value;
                
                if(
    gen == "none" || pet == "none"){
                    return 
    false;
                }else{
                    var 
    tar document.getElementById("image_container");
                    var 
    imgs tar.getElementsByTagName("IMG");
                    
                    if(
    imgs.length 0){
                        
    imgs[0].src "images/" gen "_" pet ".jpg";
                    }else{
                        var 
    newImage document.createElement("IMG");
                        
    newImage.setAttribute("src""images/" gen "_" pet ".jpg");
                        
    tar.appendChild(newImage);
                    }    
                }
            }
        
    // ]]> //
    </script>
    </head>

    <body>
    <form>
    Gender : <br />
    <select name="gender" onchange="swapImage()">
    <option value="none">Choose Gender</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    </select><br />
    Pet : <br />
    <select name="pet" onchange="swapImage()">
    <option value="none">Choose Pet</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    </select>
    </form>
    <div id="image_container"></div>
    </body>
    </html> 
    Click HERE to see it working

    You will need to name your images 'male_dog.jpg', female_cat.jpg' etc. etc.... and store them in an images folder.
    Last edited by JUD; 07-06-2006 at 04:05 PM.

  • #4
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! That is what exactly what I was looking for.


  •  

    Posting Permissions

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