如何使用单选按钮更改img src与HTML5和Javascript

我正在做一项任务，其中网页根据选定的单选按钮显示国家的国旗。该任务的目标是使用Javascript来更改img元素的src属性。我不相信我们应该使用功能，因为直到下一章才会介绍。我已经按照当前章节中的所有指南进行了讨论，但他们只讨论改变文字而不是图像。如何使用单选按钮更改img src与HTML5和Javascript

这里是我的代码：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Flags</title> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    </head> 
    <body> 
     <form name="CountryList" method="get"> 
      <table> 
       <tr> 
        <td> 
         <input type="radio" name="country" onclick="document.ProductImage.src='argentina.jpg'" />Argentina 
         <br /> 
         <input type="radio" name="country" onclick="document.ProductImage.src='australia.jpg'" />Australia 
         <br /> 
         <input type="radio" name="country" onclick="document.ProductImage.src='bolivia.jpg'" />Bolivia 
         <br /> 
         <input type="radio" name="country" onclick="document.ProductImage.src='cuba.jpg'" />Cuba 
         <br /> 
         <input type="radio" name="country" onclick="document.ProductImage.src='finland.jpg'" />Finland 
         <br /> 
         <input type="radio" name="country" onclick="document.ProductImage.src='france.jpg'" />France 
         <br /> 
         <input type="radio" name="country" onclick="document.ProductImage.src='italy.jpg'" />Italy 
         <br /> 
         <input type="radio" name="country" onclick="document.ProductImage.src='peru.jpg'" />Peru 
         <br /> 
         <input type="radio" name="country" onclick="document.ProductImage.src='syria.jpg'" />Syria 
         <br /> 
         <input type="radio" name="country" onclick="document.ProductImage.src='tunisia.jpg'" />Tunisia 
        </td> 
        <td> 
         <a><img id="ProductImage" src="" alt="Flag" /></a> 
        </td> 
       </tr> 
      </table> 
     </form> 
    </body> 
</html>

可能有人点我在正确的方向还是让我知道，如果它是不可能更改，恕不功能的IMG SRC属性？

谢谢！

来源

2013-03-12 alexgoff

不要忘记选择你的答案，一旦你找到了一个。 – 2013-03-12 20:13:48

尝试：

document.getElementById('ProductImage').src='bolivia.jpg'

等等...

来源

2013-03-12 19:52:35

感谢我的一些搜索参考 getElementById 但是，在书中或课堂上从来没有讨论过为什么要使用它，我们被告知只使用document.ProductImage.src。 – alexgoff 2013-03-12 20:19:38

如果你打算做这一切内嵌这样，改变

document.ProductImage.src

到

document.getElementById('ProductImage').src

一切都会好的。

你真的应该调用一个函数来保持你的代码在一个地方（如果图像的ID改变？），但是。

来源

2013-03-12 19:53:49 veddermatic

关于使用函数而不是内联代码;我的第一个想法。但后来我再次读到他的问题： >我不认为我们应该使用函数，因为直到下一章才会介绍。 – 2013-03-12 20:10:04

是的，我也读过，以及为什么我发布（与您一起）内联答案...但仍然很难看到内联=） – veddermatic 2013-03-12 20:44:34

你并没有真正地选择图像，使用document.getElementById("ProductImage").src = ...，虽然我真的推荐使用函数，但内联处理程序已过时。

来源

2013-03-12 19:53:55

如果我没有记错的话，它appears that I'm not，document.ProductImage指img标签与name属性设置为ProductImage。如果您通过ID引用元素，请改为使用document.getElementById()。

你修复：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Flags</title> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    </head> 
    <body> 
     <form name="CountryList" method="get"> 
      <table> 
       <tr> 
        <td> 
         <input type="radio" name="country" onclick="updateProductImage('argentina.jpg')" />Argentina 
         <br /> 
         <input type="radio" name="country" onclick="updateProductImage('australia.jpg')" />Australia 
         <br /> 
         <input type="radio" name="country" onclick="updateProductImage('bolivia.jpg')" />Bolivia 
         <br /> 
         <input type="radio" name="country" onclick="updateProductImage('cuba.jpg')" />Cuba 
         <br /> 
         <input type="radio" name="country" onclick="updateProductImage('finland.jpg')" />Finland 
         <br /> 
         <input type="radio" name="country" onclick="updateProductImage('france.jpg')" />France 
         <br /> 
         <input type="radio" name="country" onclick="updateProductImage('italy.jpg')" />Italy 
         <br /> 
         <input type="radio" name="country" onclick="updateProductImage('peru.jpg')" />Peru 
         <br /> 
         <input type="radio" name="country" onclick="updateProductImage('syria.jpg')" />Syria 
         <br /> 
         <input type="radio" name="country" onclick="updateProductImage('tunisia.jpg')" />Tunisia 
        </td> 
        <td> 
         <a><img id="ProductImage" name="ProductImage" src="" alt="Flag" /></a> 
        </td> 
       </tr> 
      </table> 
     </form> 
     <script> 
      function updateProductImage(src) { 
       document.ProductImage.src = src || 'no-image.jpg'; // Set image source to given source or no image of no source specified. 
       // Or use document.getElementById("ProductImage").src instead. 
       return true; // Continue with the click event. 
      } 
     </script> 
    </body> 
</html>

作为奖励;上面的代码的工作示例： http://jsbin.com/ihimay/1/edit

我不认为我们应该使用的功能，因为这些不覆盖，直到下一个章节。

我想你可以通过生成干净的代码而不是杂乱的内联JavaScript来获得一些奖励积分。如果它真的不使用的功能选项，只需用document.ProductImage.src = 'argentina.jpg' || 'no-image.jpg'

来源

2013-03-12 19:54:03

变化<img id更换updateProductImage('argentina.jpg')到<img name，它似乎在Chrome中工作。

来源

2013-03-12 19:56:58

我想更改我的Magento商店中的产品图像单选按钮单击不使用任何扩展名。

我只是想改变它的颜色成棕褐色和B/W在单选按钮单击相同的图像容器。（http://demo.lifestylewallart.com.au/）

由于在我的magento中会有多少图像，所以代码应该是最小的。

我尝试过在简单文件中使用html和css。

请看看，让我知道我们如何能更好地在magento商店使用它。

img { display: block; width: 50%; } 
 
    
 
    .sepia { 
 
    -webkit-filter: sepia(1); 
 
    filter: sepia(1); 
 
    } 
 
    
 
    .gray { 
 
    -webkit-filter: grayscale(1); 
 
    filter: grayscale(1); 
 
    }

<html> 
 
    <body> 
 
    Original : - <img src="http://i.stack.imgur.com/CE5lz.png"><br> 
 
    <div class="sepia"> 
 
    Sepia : - <img src="http://i.stack.imgur.com/CE5lz.png"> 
 
    </div> 
 
    <div class="gray"> 
 
    Gray :- <img src="http://i.stack.imgur.com/CE5lz.png"> 
 
    </div> 
 
    </body> 
 
    </html>

来源

2015-08-06 05:19:04

如何使用单选按钮更改img src与HTML5和Javascript

回答

相关问题