1

我正在做一项任务，其中网页根据选择的单选按钮显示国家/地区的国旗。作业的目标是使用 Javascript 更改 img 元素的 src 属性。我不认为我们应该使用函数，因为直到下一章才会介绍这些函数。我遵循了当前章节中的所有指南，但它们只讨论更改文本，而不是图像。

这是我的代码：

<!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 属性？

谢谢！

4

6 回答 6

1

如果您打算像那样内联，请更改

document.ProductImage.src

至

document.getElementById('ProductImage').src

一切都会好起来的。

不过，您确实应该调用一个函数来将代码保存在一个地方（如果图像的 ID 发生变化怎么办？）。

于 2013-03-12T19:53:49.253 回答
0

尝试：

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

等等...

于 2013-03-12T19:52:35.963 回答
0

你并没有真正正确地选择图像，使用document.getElementById("ProductImage").src = ...，虽然我真的建议使用一个函数，内联处理程序已经过时了。

于 2013-03-12T19:53:55.157 回答
0

如果我没记错的话，而且看起来我不是，document.ProductImage指的是属性设置为的img标签。如果您通过 ID 引用元素，请改用。nameProductImagedocument.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 来获得一些奖励积分。如果确实不是使用函数的选项，只需替换updateProductImage('argentina.jpg')为document.ProductImage.src = 'argentina.jpg' || 'no-image.jpg'

于 2013-03-12T19:54:03.477 回答
0

更改<img id为<img name它似乎可以在 Chrome 中使用。

于 2013-03-12T19:56:58.233 回答
0

我想在不使用任何扩展程序的情况下通过单选按钮单击更改我的 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-06T05:19:04.150 回答