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
  1. #1
    New Coder
    Join Date
    Dec 2004
    Location
    Crown Point, IN
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Help Please:)

    hi. i'm trying to have an image change to match with the id of the selected option. What i'd like it to eventually do is when i click the button 'back', it'll take the value and subtract one from it and change the photo to go with the new id and vise-versa with 'next'. can anybody help me?

    this is my code so far


    PHP Code:
     
    <html>

        <
    head>
            <
    title>test</title>
        </
    head>

        <
    body><center>
                <
    p><image name='pic1'></p>
            <
    input type="button" value="Back" onClick="fun();">
            <
    select name='name' onChange="document.images['pic1'].src =options[selectedIndex].id + '.jpg';window.status=options[selectedIndex].id;">
                <
    option id='next' value=1>next</option>
                <
    option id='back' value=2>back</option>
            </
    select>
            <
    input type="button" value="Next" onClick="fun();">
            <
    script languange="javascript">
                function 
    fun()
                {
                       
    alert("hi");
                }
                function 
    change(selectedIndex)
                {
                       
    //need stuff to go here
                
    }
            
    </script>
        </center></body>

    </html> 

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,495
    Thanks
    3
    Thanked 500 Times in 487 Posts
    I got as far as this then got confused on what you wanted

    PHP Code:
     <html>

        <
    head>
            <
    title>test</title>
        </
    head>

        <
    body><center>
            <
    input type="button" value="Back" onClick="fun();">
            <
    select name='name' onChange="change(this.options[this.selectedIndex].value);">
                <
    option value='One' >next</option>
                <
    option value='Two' >back</option>
            </
    select>
            <
    input type="button" value="Next" onClick="fun();">

            <
    script languange="javascript">

                function 
    fun(){
                       
    alert("hi");
                }

                function 
    change(img){
                
    document.getElementById('pic1').src='http://www.vicsjavascripts.org.uk/StdImages/'+img+'.gif';      //need stuff to go here
                
    }
            
    </script>
    <img id="pic1" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width="100" height="100">

        </center>


        </body>

    </html> 

  • #3
    New Coder
    Join Date
    Aug 2004
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Hi,

    Check out the below code.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function doChange(opt){
    var selobj=document.getElementById("piclist");
    var idx=selobj.selectedIndex;
    if(opt=="back" && idx!=0) idx--;
    if(opt=="next" && idx!=selobj.options.length-1) idx++;
    document.getElementById("mypic").src=selobj.options[idx].value+'.jpg';
    selobj.selectedIndex=idx;
    }
    //-->
    </SCRIPT>
    </HEAD>
    
    <BODY BGCOLOR="#FFFFFF">
    
    <img id="mypic" src="pic1.jpg">
    <input type="button" value="back" onclick='doChange("back")'>
    <input type="button" value="next" onclick='doChange("next")'>
    <SELECT id="piclist" onchange='doChange("selected")'>
    <option value="pic1">Pic1</option>
    <option value="pic2">Pic2</option>
    <option value="pic3">Pic3</option>
    </SELECT>
    
    </BODY>
    </HTML>
    You need to have 3 pictures pic1.jpg, pic2.jpg and pic3.jpg to see this code working. Actually it works both with back, next buttons and the drop down list too...

    Be sure to post if it works out for you...

    Have a nice day

    Afru.

  • #4
    New Coder
    Join Date
    Dec 2004
    Location
    Crown Point, IN
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow afru... that works great

    i added a little to it to have the status show a message

    PHP Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function 
    doChange(opt){
    var 
    selobj=document.getElementById("piclist");
    var 
    idx=selobj.selectedIndex;
    if(
    opt=="back" && idx!=0idx--;
    if(
    opt=="next" && idx!=selobj.options.length-1idx++;
    document.getElementById("mypic").src=selobj.options[idx].value+'.jpg';
    selobj.selectedIndex=idx;
    window.status=selobj.options[idx].name;
    }
    //-->
    </SCRIPT>
    </HEAD>

    <BODY BGCOLOR="blue">

    <p><img id="mypic" src="pic1.jpg"></p>
    <input type="button" value="back" onclick='doChange("back")'>

    <SELECT id="piclist" onchange='doChange("selected")'>
    <option value="pic1" name="picture 1">Pic1</option>
    <option value="pic2" name="picture 2">Pic2</option>
    <option value="pic3" name="picture 3">Pic3</option>
    </SELECT>
    <input type="button" value="next" onclick='doChange("next")'>
    </BODY>
    </HTML> 
    thanks a lot


  •  

    Posting Permissions

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