使用Javascript / html替换简单的图像

Question

找不到这个简单任务的准时答案，我们非常感谢您的帮助

我们想要根据用户的颜色选择切换图像。

尝试了几种方法，没有一种方法。

这是个主意：

Answer 1

$('#YourButton').click(function() {
    var oldSrc = 'images/Image1.png';
    var newSrc = 'images/Image2.png';
    $('img[src="' + oldSrc + '"]').attr('src', newSrc);

});

只需点击带有其他颜色的按钮

，即可使用javascript更改图像源

注意：它是jquery所以你必须包含js文件..

Answer 2

只需将点击监听器绑定到您的按钮，然后更改图片的src属性。

$('#colorButton').click( function() { //choose a new color
    $('#imageIcon').attr('src', 'path/to/new/image.png'); //change the img's source
});

编辑（回答问题）： 如果您希望此代码应用于所有按钮，请为每个按钮指定一个类似的类而不是ID：

<div class="colorButton"></div>

然后，您可以使用以下选择器将上述点击侦听器应用于所有这些divs：

$('.colorButton')

当然，您希望尽可能简单地更改图像。您可以将所有颜色映射到相应的图像文件，但就设计而言，这可能会变得混乱和笨拙。我会创建一个存储所有图像文件的目录（例如/your/color/swatches），并为每个图像文件指定一个与其颜色一致的名称，例如'ff0000.png'表示红色，'0000ff.png'表示蓝色等等。

我们为什么要这样做？这样我们就可以根据按钮的background-color属性切换图像。我们假设您有以下按钮：

<div class="colorButton" style="background-color: '#ff0000'"></div>
<div class="colorButton" style="background-color: '#0000ff'"></div>

您可以使用相同的点击侦听器，但由于我们将背景颜色映射到图像，因此必须对其进行修改：

$('.colorButton').click( function() {
    var color = $(this).css('backgroundColor');
    //(You'll need to modify your color string here)
    $('#imageIcon').attr('src', 'your/color/swatches/' + color + '.png');
});

但这还不行。由于大多数浏览器都会从"rgb(xx, yy, zz)"返回.css('backgroundColor')，因此您需要将该字符串转换为十六进制。 This post on SO提供了一种或多或少有效的方法，但您需要修改它以适合我指明的模型。