web-dev-qa-db-ja.com

CSSを使用してimg src属性を変更することは可能ですか？

CSSでimg src（背景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.*/
}
cssimagesrc
13
qadenza

いいえ-CSSはCSSの背景画像の変更にのみ使用でき、HTMLコンテンツの変更には使用できません。

通常、コンテンツではなくUI要素は、いずれにしてもCSS背景を使用してレンダリングする必要があります。クラスを交換すると、背景画像を交換できます。

3
Diodeus - James MacFarlane

以下を使用できます。

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

これを修正する別の方法があります：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/

17
Ben Tayaa

CSSを使用して、a）幅と高さを0に設定するか、画面外に移動するなどして元の画像を非表示にし、b）:: beforeまたは:: after擬似要素に新しい画像を挿入できます。

ただし、ブラウザは元の画像と新しい画像の両方をロードするため、パフォーマンスが低下します。ただし、Javascriptは必要ありません！

4
Mr Lister

このようなものを試すことができます

<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')
}
3
daniel__

CSSを介してimage src属性を設定することはできません。 backgroundまたはbackground-image。

3
Dhaval Marthak

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を好みに合わせて変更します。

1
Patrick

画像を完全に透明な画像に設定し、背景画像を次のように変更できます。

img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}

ただし、画像は同じサイズでなければなりません。 ：（ お役に立てれば！

0
CookiePanda