0

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

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

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

当用户选择一种颜色时，图像会发生变化。When a circle position is selected the image will change. 每一个都是不同的东西。我已经在这里进行了搜索，但我还没有提出任何可靠的方向。我看到的唯一有助于理解的事情是：

<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，因此对于阅读本文的任何帮助或有关如何完成此操作的提示将不胜感激。

4

2 回答 2

0

第一条规则：如果不需要，不要使用 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()在调试代码时使用。这样你就知道你的代码哪里有问题，并且通过错误信息你会很好地提示它失败的原因。

于 2013-07-18T08:39:52.703 回答
0

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

<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>
于 2013-07-18T09:32:24.737 回答