...

View Full Version : 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





<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



<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.



<!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:D

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



<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum