2013-07-17 747 views
10

我想用css來改變IMG SRC(不是背景IMG SRC)是否可以使用css更改img src屬性?

<img id="btnUp" src="img/btnUp.png" alt="btnUp"/> 

#btnUp{ 
    cursor:pointer; 
} 
#btnUp:hover{ 
    src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/ 
} 

回答

3

否 - CSS只能用於更改CSS背景圖片,而不是HTML內容。

總而言之,UI元素(不是內容)應該使用CSS背景渲染。交換類可以交換背景圖像。

+1

感謝。解決:) – bonaca

+14

錯誤 - 你可以很容易地做到這一點與CSS3和'content'屬性,請看這裏:http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img -tag-in-css#answer-11484688 – Timo

+5

更新:內容屬性僅適用於Webkit/Chrome - 不適用於FF或IE。 – Timo

2

您無法通過CSS設置圖像src屬性。你可以得到的是,如果你想設置使用backgroundbackground-image

3

你可以嘗試這樣的事情

<img id="btnUp" src="empty.png" alt="btnUp" /> 

<div id="btnUp" title="btnUp"> <div/> 

#btnUp{ 
    cursor:pointer; 
    width:50px; 
    height:50px; 
    float:left;  
} 

#btnUp{ 
    background-image:url('x.png') 
} 

#btnUp:hover{ 
    background-image:url('y.png') 
} 
1

您可以使用JavaScript和CSS的混合物來實現這一點,但你不能做到這一點單獨使用CSS。 <img id="btnUp" src="empty.png" alt="btnUp" onmouseover="change(img)" onmouseout="changeback(img)" /> 而不是img你會把文件名稱sans文件類型。

function change(img){ 
document.getElementById("btnUp").src= img + ".png"; 
} 
function changeback(img){ 
document.getElementById("btnUp").src= img + ".png"; 
} 

然後你使用CSS來修改img標籤或id到你的喜好。

3

您可以使用CSS來a)通過將其寬度和高度設置爲0或將其移出屏幕等等來使原始圖像不可見,以及b)在它的:: before或:: after僞中插入新圖像-元件。

儘管如此,瀏覽器將會加載原始圖像和新圖像,但這會帶來性能。但它不會需要Javascript!

21

您可以使用:

content: url("/_layouts/images/GEARS_AN.GIF") 
+0

爲什麼downvote?這是正確的答案。 – Timo

+9

更新:似乎這隻適用於webkit/Chrome,但不適用於FF或IE。 – Timo

+0

這不適用於Firefox –

14

還有另一種方式來解決這個問題:使用CSS盒子大小。

HTML:

<img class="banner" src="http://domaine.com/banner.png"> 

CSS:

.banner { 
    display: block; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    background: url(http://domain2.com/newbanner.png) no-repeat; 
    width: 180px; /* Width of new image */ 
    height: 236px; /* Height of new image */ 
    padding-left: 180px; /* Equal to width of new image */ 
} 

http://css-tricks.com/replace-the-image-in-an-img-with-css/

+0

這對我來說很方便 – RozzA

+0

歡迎你的傢伙:) –

+0

是的,這是解決方案 –