画像置換 | 696graphic[BLOG]

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

画像の置換、何かと使いますね。
バナーだとかボタンだとか。マウスオーバーした時に、ちょっと色が明るくなったりするだけで、見栄え違いますもんね。

その昔は

<img alt="画像だよ" src="hoge.png"
onMouseOver="this.src='hogehoge.png'"
onMouseOut="this.src='hoge.png'" />

<img alt="画像だよ" src="hoge.png"

onMouseOver="this.src='hogehoge.png'"

onMouseOut="this.src='hoge.png'" />

こんな書き方をしてました…。よろしくないですね…我ながら…。

ということで、CSSでの書き方をめもめも。

画像は最初から表示しておく画像と置換後の画像を一つにまとめたものを作らねばなりません。

↑こんな感じに。

<div id="hoge">
<a href="#"><img alt="画像だよ" src="hoge.png" /></a>
</div>

</div>

#hoge a {
width:160px;
height:80px;
overflow:hidden;
display: block;
}
#hoge a:hover img {
margin-top:-80px;
}

#hoge a {

width:160px;

height:80px;

overflow:hidden;

display: block;

}

#hoge a:hover img {

margin-top:-80px;

}

overflow:hiddenで余計な部分を非表示にして
マウスオーバーした時に、上の方に画像を移動させると。＞margin-topで

タグ: 画像置換