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.*/
}
いいえ-CSSはCSSの背景画像の変更にのみ使用でき、HTMLコンテンツの変更には使用できません。
通常、コンテンツではなくUI要素は、いずれにしてもCSS背景を使用してレンダリングする必要があります。クラスを交換すると、背景画像を交換できます。
以下を使用できます。
content: url("/_layouts/images/GEARS_AN.GIF")
これを修正する別の方法があります: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 */
}
CSSを使用して、a)幅と高さを0に設定するか、画面外に移動するなどして元の画像を非表示にし、b):: beforeまたは:: after擬似要素に新しい画像を挿入できます。
ただし、ブラウザは元の画像と新しい画像の両方をロードするため、パフォーマンスが低下します。ただし、Javascriptは必要ありません!
このようなものを試すことができます
<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')
}
CSSを介してimage src
属性を設定することはできません。 background
またはbackground-image
。
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を好みに合わせて変更します。
画像を完全に透明な画像に設定し、背景画像を次のように変更できます。
img {
background-image: url("img1.png");
}
//For example, if you hover over it.
img:hover {
background-image: url("img2.png");
}
ただし、画像は同じサイズでなければなりません。 :( お役に立てれば!