根据表单选择更改图像

Question

我正在尝试找出执行此操作的最佳方法。这是我正在尝试创建的一种形式，而不是3种不同的形式。

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

抱歉，我还没有发布代表10，所以我无法发布图像表示。

当用户选择颜色时，图像将改变。 选择圆形位置时，图像将改变。 每个人都是不同的。 我已经在这里进行了搜索，但是在方向方面我还没有提出任何可靠的建议。 我所见过的唯一有助于理解的事情是：

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

不过，这并不是我要尝试的。 我知道php，但是我还不了解javascript，因此，对阅读本文或如何完成此操作的任何帮助将不胜感激。

Answer 1

第一条规则：如果不需要，请不要使用eval 。 如果先将图像保存在数组中，则可以更改获取图像的代码：

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

然后，当您设置图像时，它将看起来像这样（假设您为图像指定了ID）：

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

作为一般提示：调试代码时，请使用console.log() 。 这样，您就知道代码中存在问题，并且通过错误消息，您可以清楚地知道为什么失败。

Answer 2

我尝试并正确运行正确的代码是：

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

根据表单选择更改图像

问题描述

2 个解决方案

解决方案1
0 2013-07-18 08:39:52

解决方案2
0 2013-07-18 09:32:24

根据表单选择更改图像

问题描述

2 个解决方案

解决方案1 0 2013-07-18 08:39:52

解决方案2 0 2013-07-18 09:32:24

解决方案1
0 2013-07-18 08:39:52

解决方案2
0 2013-07-18 09:32:24