0

无法为这个简单的任务找到准时的答案，非常感谢您的帮助

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

尝试了几种方法，都没有奏效。

这是这样的想法：

4

2 回答 2

0

只需将单击侦听器绑定到您的按钮并更改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')，您需要将该字符串转换为十六进制。SO上的这篇文章提供了一种或多或少有效的方法，但是您需要对其进行修改以适合我指出的模型。

于 2013-04-16T17:26:46.553 回答
0 
$('#YourButton').click(function() {
    var oldSrc = 'images/Image1.png';
    var newSrc = 'images/Image2.png';
    $('img[src="' + oldSrc + '"]').attr('src', newSrc);

});

Just change the image source with javascript by clicking your button with another color

Note: it´s jquery so you have to include the js file..

于 2013-04-16T17:20:45.057 回答