간단한 이미지는이 간단한 작업에 대한 지키는 답을 찾을 수 없습니다 자바 스크립트/HTML

Question

를 사용하여 교체하고 당신의 도움이 매우 우리는 우리가 사용자의 색상 선택에 따라 전환 할 이미지가

을 감사합니다.

몇 가지 방법을 시도했지만 아무 것도 작동하지 않았습니다. 당신이 포함 그래서 키우면의 JQuery와 :

Answer 1

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

}); 

그냥 다른 색상

참고로 버튼을 클릭하면 자바 스크립트로 이미지 소스를 변경합니다

이

는 생각입니다 js 파일 ..

Answer 2

버튼에 클릭 수신기를 바인딩하고 이미지의 src 속성을 변경하십시오.

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

EDIT (질문에 대한 응답) : 이 코드는, 당신의 모든 버튼에 적용하여 버튼 대신 ID의 비슷한 클래스의 각 부여하려면 : 당신이 그런

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

을 이 divs의 모든 위의 클릭 리스너를 적용하기 위해 다음과 같은 선택을 사용할 수 있습니다 : 당연히

$('.colorButton') 

, 당신은 단순히 페이지로 이미지를 변경하려면 ossible. 모든 색상을 해당 이미지 파일에 매핑 할 수는 있지만 디자인이 간다면 지저분하고 다루기 힘들 수 있습니다. 우리가 이런 짓을 했을까하는 이유 등 적색 'ff0000.png', 파란색에 대한 '0000ff.png',

처럼 (예를 들어, /your/color/swatches) 이미지 파일을 모두 저장하는 디렉토리를 생성하고 그들의 색상과 일치하는 이름을 각을 줄 것이다 ? 버튼의 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)"을 반환하므로 해당 문자열을 16 진수로 변환해야합니다. This post on SO은 다소 효과적인 방법을 제공하지만 지시 한 모델에 맞게 수정해야합니다.