Image Help Please:)

cursor_joe · 03-13-2005, 03:33 PM

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>

vwphillips · 03-13-2005, 05:53 PM

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>

afru · 03-13-2005, 05:57 PM

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.

cursor_joe · 03-13-2005, 11:57 PM

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!=0) idx--;

if(opt=="next" && idx!=selobj.options.length-1) idx++;

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