Changing Image Based On Form Selection

Question

I'm trying to figure out the best way to go about doing this.This is one form that I'm trying to create and not 3 different forms.

http://www.amazinsounds.com/form-image-if.png

Sorry I couldn't post the image representation as I don't have rep 10 just yet.

As a user selects a color the image will change. When a circle position is selected the image will change. Each one being something different. I've done a search here, but I've yet to come up with anything solid in terms of direction. The only thing close that i've seen that helped understand a little is this:

<HTML><HEAD><SCRIPT>
// preload images
var img1 = new Image().src = "../images/jht.gif"
var img2 = new Image().src = "../images/jsht.gif"
var img3 = new Image().src = "../images/pht.gif"

function setImage(imageSelect) {
 theImageIndex = imageSelect.options[imageSelect.selectedIndex].value;
 if (document.images)
     document.images[0].src = eval("img" + theImageIndex);
  }
</SCRIPT></HEAD><BODY>
<FORM NAME="theForm" METHOD="POST">
<TABLE><TR><TD>Images: <TD>
<SELECT NAME="items" onChange="setImage(this)">
   <OPTION VALUE="1">Java How-to
   <OPTION VALUE="2">Javascript How-to
   <OPTION VALUE="3">Powerbuilder How-to
 </SELECT>
 <TD><IMG SRC = "../images/jht.gif" HEIGHT=100 WIDTH=200>
 </TABLE></FORM></BODY></HTML>

It's not quite what I'm trying to do though. I know php, but I don't understand javascript just yet so any help on reading this or tips on how to accomplish this would be much appreciated.

I can think of many, many reasons why you shouldn't use the HTML in your example... Anyway, are you saying all the variations of your images will exist already, or are you creating them on the fly? — Mr Lister, Jul 18 '13 at 08:30
And judging by the answers, you should have made it more clear that what you want is in the picture you showed, and that the HTML is not your own work, nor what you want to achieve. — Mr Lister, Jul 18 '13 at 11:00
Hi @MrLister thanks for the response. Sorry about that. The images will exist already. I thought that it was clear that that this was something I found that could help figure out the language I should attempt to use. — Chris, Jul 18 '13 at 18:47

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

First rule: dont use eval if you dont have to. You can change the code for getting the image if you save them in an array first:

var images = [];
images[1] = new Image(); images[0].src = "../images/jht.gif";
images[2] = new Image(); images[1].src = "../images/jsht.gif";

Then when you set the image it would look like this (assuming you have given your image an id):

document.getElementById('imageID') = images[theImageIndex];

As a general tip: use console.log() when debugging your code. Like this you know where there are problems in your code, and through the error message you will have a great hint of why it failed.

edited May 23 '17 at 11:56

Community

1
1

answered Jul 18 '13 at 08:39

Michael Kunst

2,978
25
40

Thanks @Michael Kunst . I'm going to work through an attempt. I'd appreciate if you could evaluate it once I've completed it. – Chris Jul 18 '13 at 18:49
can we chat further discussion on this? – Chris Jul 18 '13 at 22:27
Yes definitely. I'm working late and have plans today, though. Tomorrow I'd be available during the day. – Michael Kunst Jul 19 '13 at 09:46

Ibrahim Attia · Answer 2 · 2013-07-18T09:38:00.713

i try it and run correctly the correct code is:

<head>
<script type="text/javascript">
// preload images
    var img1 = new Image().src = "images/jht.gif";
    var img2 = new Image().src = "images/jsht.gif";
    var img3 = new Image().src = "images/pht.gif";

    function setImage(imageSelect) {
        theImageIndex = imageSelect.options[imageSelect.selectedIndex].value;
        if (document.images)
            document.images[0].src = eval("img" + theImageIndex);
    }
</script>
</head>
<body>
<form name="theForm" method="post">


<table>
<tr>
    <td>Images: </td>
    <td>

<select name="items" onchange="setImage(this)">
<option  value="1">Java How-to </option>
<option value="2">Javascript How-to </option>
<option value="3">Powerbuilder How-to</option>
</select>
</td>
<td><img src = "images/jht.gif" height="100" width="100"/></td>
</tr>
</table></form>
</body>

Changing Image Based On Form Selection

2 Answers2