cssを使用してimg src属性を変更することはできますか？

Question

私はCSS

<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.*/ 
} 

Answer 1

ないとIMG SRC（ではないバックグラウンドのIMG SRC）を変更しようとしている - CSSはCSSの背景画像ではなく、HTMLコンテンツを変更するために使用することができます。

一般にUIの要素（コンテンツではない）は、CSSの背景を使用してレンダリングする必要があります。クラスをスワップすると、背景イメージを交換できます。

Answer 2

CSSで画像srcを設定することはできません。あたかも、backgroundまたはbackground-imageのように使用したいかのように得ることができます。

Answer 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') 
} 

Answer 4

あなたはこれを達成するために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を好みのとおりに変更します。

Answer 5

CSSを使用すると、幅と高さを0に設定したり、画面外に移動したりして元の画像を非表示にすることができます。b）:: beforeまたは:: after疑似-素子。

ブラウザが元のイメージと新しいイメージの両方を読み込むため、パフォーマンスが低下します。しかし、それはJavascriptを必要としません！

Answer 6

あなたは使用することができます：CSSボックス・サイズを使用して：

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

Answer 7

すると、この問題を解決する別の方法があります。

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/