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

第一条规则：dont use 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 个答案: