JS改變圖像與按鈕

JSJS改變圖像與按鈕

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>

CSS

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

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

我試圖使圖像的變化，當我按下按鈕，所以當你按按鈕圖像的樣式是假設改變圖像。這可以工作，你可以看到圖像的變化，除了你看到的所有圖像都是圍繞圖像輪廓和中間空白的薄黑色邊框，所以你看不到圖像。還嘗試過.className方法，而不是.style，並且沒有工作

來源

2013-11-24 joe

你可以創建一個jsfiddle.net？ – mplungjan

這裏：http://jsfiddle.net/sKdR3/ wierd，我將圖像更改爲外部網站，它發現了第二個圖像，當我點擊，但不是當它是服務器端，任何想法，爲什麼可能是？ – joe

您應該使用img標記的src屬性而不是背景屬性來設置圖像。如果您想使用背景屬性，請使用div標籤而不是img標籤。下面是使用src屬性的例子..

http://jsfiddle.net/2tSbq/

從本質上講，它和你一樣，除了我在做什麼，直接與HTML ..設置圖像的inital值

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

，然後使用JavaScript的更新...

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

來源

2013-11-24 06:14:14

JS改變圖像與按鈕

回答

相關問題