基于 SELECT 更改图像 SRC答案

【问题标题】：Changing Image SRC Based on SELECT基于 SELECT 更改图像 SRC
【发布时间】：2010-11-09 20:01:50
【问题描述】：

我有一个选择标签，每次页面加载时都会填充一个文件列表。每次在选择输入中单击一个时，我希望图像更改为所选文件。这是我现在拥有的，它不能正常工作。但是，当它被单击时，图像和文本应该是可见/隐藏的。任何帮助将不胜感激。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title> Table Edit The Shakespeare Studio </title>
    <link rel="stylesheet" type="text/css" href="../styles.css" />
</head>
<body>
<script language="javascript" type="text/javascript">
  function edit_image1()
  {
    if (document.getElementById('select1').value == "0") {
      document.preview1.style.visibility = "hidden";
      document.getElementById('random1').style.visibility = "visible";
    } else {
      var selected = document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;
      document.preview1.style.visibility = "visible";
      document.preview1.src = "../resources/uploads/"+selected;
      document.getElementById('random1').style.visibility = "hidden";
    }
  }
</script>
<div id="everything">
  <form action='tableEdit.php' method='GET'>
    <table border='1' id='cal'>
      <tr id='top'><td> Page Name </td><td> Image to Use </td><td> Preview </td></tr>
      <tr>
        <td> about </td>
        <td>
          <select name='aboutImage' id='select1' onchange='edit_image1()';>
            <option value='0' selected> RANDOM IMAGE</option> 
            <option value='IMG_6027.JPG'>IMG_6027.JPG</option> 
            <option value='IMG_6032.JPG'>IMG_6032.JPG</option> 
            <option value='kissme-1.jpg'>kissme-1.jpg</option> 
          </select>
        </td>
        <td>
          <img name='preview1' src='../resources/uploads/0'></img>
          <h3 id='random1'> Random </h3>
        </td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>

【问题讨论】：

标签： javascript onclick image

【解决方案1】：

当我做类似的事情时，我在脚本中创建了一个新的Image 对象。您应该能够简单地通过构建一个“<IMG>”元素并设置父元素的innerHTML 属性来做到这一点。

编辑：像这样：

<html>
<head>
    <title>Image Replacement Example</title>
</head>
<body>
<div id="imageHolder">
    <img src="http://stackoverflow.com/content/img/so/logo.png">
</div>
<br>
<button onClick="javascript:newImage();return false;">Click Me</button>

<script type="text/javascript">
    function newImage()
    {
        var holder = document.getElementById("imageHolder");
        holder.innerHTML = "<img src='http://serverfault.com/content/img/sf/logo.png'>"
    }
</script>

【讨论】：

完美运行！非常感谢！

【解决方案2】：

您的代码中有许多错误，但您肯定正在努力让它工作。

您正在正确地考虑更改图像的“src”值，这将正确显示，但请注意服务器必须连接并下载新图像。

使用与您相同的 HTML，使用以下 javascript 代码：

function edit_image(){
    var doc = document;
    var selectedIndex = doc.getElementById('select1').selectedIndex;
    var previewVisible = doc.getElementById("preview1").style.visibility;
    var randomVisible= doc.getElementById("random1").style.visibility; 

    if (selectedIndex === 0){
        previewVisible = "hidden";
        randomVisible = "visible";
    } else {
        var previewSrc = doc.getElementById("preview1").src;
        var selectValue = doc.getElementById('select1').options[selectedIndex].value;

        previewSrc = "../resources/uploads/"+ selectValue;
        previewVisible = "visible";
        randomVisible = "hidden";
    }

我认为这也是给您一些编写高效 Javascript 的技巧的好时机。我设置所有这些局部变量的原因是因为局部变量比全局对象读取和交互的 JavaScript 快很多。 “文档”对象是全局范围的一部分，随着页面和功能的增长，访问速度会一直变慢。

我还为 document.getElementById("someid") 的每个属性设置了一个变量，因为在浏览器中调用 DOM 函数真的很慢。

另外，像这样设置一个变量：

var links = document.getElementsByTagName("A");

创建一个引用 QUERY 到 DOM 的变量，NOT 引用一个包含页面上所有链接的数组。因此，随着您逐步执行以下操作：

links.style.visibility = "visible";
links.innerHTML = "some new text";

您实际上最终会进行两次查询以获取页面上的每个锚点。

很抱歉，如果这一次包含大量信息，但这个示例代码看起来是一个很好的方法，可以为您提供一些技巧来编写更好的 Javascript 并帮助为互联网创建更好的网页 :-)

【讨论】：

【解决方案3】：

您可以将图像路径存储在一个数组中，并将每个路径与选定的索引同步，如下所示：

<table border="1">
    <tr><td>Page Name</td><td>Image to Use</td><td>Preview</td></tr>
    <tr>
        <td>about</td>
        <td>
            <select id="select1">
                <option selected>RANDOM IMAGE</option> 
                <option>IMG_6027.JPG</option> 
                <option>IMG_6032.JPG</option> 
                <option>kissme-1.jpg</option> 
            </select>
        </td>
        <td>
            <img id="preview1" alt="image" src="0.JPG">
            <h3 id="random1">Random</h3>
        </td>
    </tr>
</table>

<script type="text/javascript">
var images = [];
var select1 = window.document.getElementById("select1");
var preview1 = window.document.getElementById("preview1");
var random1 = window.document.getElementById("random1");
var selectLength = select1.length;
images[0] = "0.JPG";
images[1] = "IMG_6027.JPG";
images[2] = "IMG_6032.JPG";
images[3] = "kissme-1.jpg";
function edit_image1() {
    var index = select1.selectedIndex;
    if (index !== 0) {
        preview1.src = images[index];
        random1.style.visibility = "hidden";
    } else {        
        preview1.src = images[Math.floor(Math.random() * selectLength)];
        random1.style.visibility = "visible";
    }
    return true;
}
select1.onchange = edit_image1;
</script>

【讨论】：