JS 버튼으로 이미지를 변경

Question

JS

var identbutton = document.getElementById('imagebutton'); 
var imag = document.getElementById('contentimage'); 
var runtext = function(){ 
    imag.style.background="url(../images/contimgtwo.jpg)"; 
} 
identbutton.addEventListener("click",runtext,"false"); 

HTML

<button id="imagebutton">click here to change images</button> 
<img id="contentimage"></a> 

내가 버튼을 누르면 이미지 변화를 만들기 위해 노력하고있어

#contentimage { 
display:block; 
background:url(../images/contimg.jpg); 
top:1600px; 
width:500px; 
height:400px; 
position:absolute; 
} 

#contentimage:hover { 
    opacity:0.5; 
    cursor:crosshair; 
} 

CSS 그래서 때를 버튼을 누르면 이미지의 스타일이 이미지를 변경한다고 가정합니다. 이것은 작동하고 이미지의 윤곽선 주위에 얇은 검은 색 경계선이 있고 중간에 공백이있어 이미지를 볼 수 없다는 것을 제외하면 이미지 변경을 볼 수 있습니다. 또한 .class 대신 .className 메서드를 시도했으나 작동하지 않았습니다.

Answer 1

배경 속성 대신 img 태그의 src 특성을 사용하여 이미지를 설정해야합니다. 백그라운드 속성을 사용하려면 img 태그 대신 div 태그를 사용하십시오. 여기에 src 속성을 사용하는 예입니다 .. 기본적으로

http://jsfiddle.net/2tSbq/

, 직접와 html로 ...에 이미지의 inital 값을 설정 당신이 I를 제외하고 있었다로서의 같은

<img src="https://www.somewebsite.com/someimage.jpg" id="contentimage"> 

그리고 자바 스크립트를 사용하여 업데이트는 ...

imag.src = 'http://www.somewesbtie.com/anotherimage.jpg";