使用 JavaScript 根据下拉菜单更改图像。

Question

我是 javascript 的初学者，我想根据下拉列表（选择）中的选项更改图像，我找到了本教程，但我遇到了一些问题。

在本教程中，如果您想使用代码，他们会将 iljbild 替换为您要使用的图片文件的名称，因为图片文件的名称必须与示例中的类型相同，即唯一的区分文件的东西应该是一个数字，例如 pict0.gif、pict2.gif 等。如果您使用 jpg 图像，则必须将 gif 替换为 jpg。设置图像的宽度和高度如果您更改选择列表中的单词（长度），您还必须更改 charAt 之后的数字（此处为 8）

这就是我通过将 iljbid 替换为： http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg所做 的，但它不起作用。

Answer 1

本教程希望您有一个具有命名约定的图像列表。即{前缀}{数字}.{扩展名}。例如： image0.jpg image1.jpg image2.jpg 等等...

所有图像的前缀必须相同，并且所有图像的扩展名必须相同。这是一个完成效果的简单教程。

一旦您掌握了更多 JavaScript 知识，就可以对其进行扩展。

另外，那个教程真的很糟糕（并不是不尊重，但它确实缺乏。将示例本身复制并粘贴到 JSFiddle 中会到处抛出错误）。

教程是1998年的。也就是16岁了。我强烈建议您寻找更新的教程。(2010+)

以下是本教程的示例副本： http: //jsfiddle.net/VmWD9/

超文本标记语言

<img src="http://www.flowsim.se/picts/selec01.jpg" width="70" height="70" name="myImage" />
<form method="" action="" name="myForm">
    <select size="8" name="switch" onchange="switchImage();">
        <option value="1">Image 1</option>
        <option value="2">Image 2</option>
        <option value="3">Image 3</option>
        <option value="4">Image 4</option>
        <option value="5">Image 5</option>
        <option value="6">Image 6</option>
        <option value="7">Image 7</option>
    </select>
</form>

JavaScript

// This is the code to preload the images
var imageList = Array();
for (var i = 1; i <= 7; i++) {
    imageList[i] = new Image(70, 70);
    imageList[i].src = "http://www.flowsim.se/picts/selec0" + i + ".jpg";
}

function switchImage() {
    var selectedImage = document.myForm.switch.options[document.myForm.switch.selectedIndex].value;
    document.myImage.src = imageList[selectedImage].src;
}

尽管现在人们使用 jQuery 或 MooTools 等 JavaScript 库来完成类似的事情。我确实发现，在进入这些库之前最好先用纯 JS 进行探索，尽管这不是必需的。大多数这些库都很容易掌握，但是当你想做大事时，你可能需要具备 JS 知识。

我建议您阅读Codecademy JavaScript 教程。