CSSが得意な渋谷のウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

背景画像を使わないマウスオーバーで画像入れ替えリンク

cssを変更するのが面倒な仕様のサイトには便利なやり方。
用意する画像はメインとなるものと半透明にしたpng画像。
##
html:画像のタグは改行しないで続けてかくこと
<a href="#">
  <img src="jpg" alt="メイン画像" /><img src="png" class="imghover" alt="オーバー時用" />
</a>
css:平常時に二つ目の画像が隠れて上にかぶさっているのがマウスオーバー時にあらわれる仕組み。CSSでTooltipやプルダウンメニューを作る時と同じ要領。
img.imghover{
margin-left:-560px;/*画像の幅*/
margin-top:-300px;/*画像の高さ レイアウトによって不要の場合あり*/
display:none;
}
a:hover img.imghover{
display:inline;
}
関連記事
この記事役にたった?
管理者にだけメッセージを送る

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。