javascript - 使用 javascript 根据下拉列表更改图像。

Question

我是 javascript 的初学者，我想根据下拉列表中的选项更改图像(选择)我找到这个 tutorial ，但我遇到了一些问题。

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

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

Answer 1

本教程希望您拥有一个具有命名约定的图像列表。即 {prefix}{number}.{extension}。例如:图片0.jpg图片1.jpg图片2.jpg等等……

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

一旦你有更多的 JavaScript 知识，它就可以扩展。

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

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

这是有效的教程的示例副本: http://jsfiddle.net/VmWD9/

HTML

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

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

我建议您浏览 Codecademy JavaScript 教程。