[使えるCSSテクニックVol.2] 第 9 回 CSS だけで実現する画像ボタンのロールオーバー | バシャログ。
第 9 回目は「 CSS だけで実現する画像ボタンのロールオーバー」です。 javascriptを使用せずに、ロールオーバー効果をCSSのみでやってみましょう。 以下のボタン画像にマウスをのせてみてください。 サンプル1. 位置をずらす XHTML <p class="sample1"><a href="#"> <img src="hogehoge" alt="ボタン" width="200" height="50" /></a></p> .sample1 a:hover { position: relative; top: 1px; left: 1px; } positionプロパティを使って位置をずらします。 サンプル2. 透過させる XHTML <p class="sample2"><a href="#"> <img src="hogehoge" alt="ボタン" width="2
![[使えるCSSテクニックVol.2] 第 9 回 CSS だけで実現する画像ボタンのロールオーバー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
CSSを使い画像1種類だけでロールオーバー効果を簡単に実現する方法 | バシャログ。
画像にリンクをはる場合、ロールオーバー用の画像を別途書き出して JavaScriptで差し替える方法が一般的です。 それだと毎回画像が増えるたびに、ロールオーバー用の画像を書き出すのが手間になります。 今回ご紹介するのは、そんな画像効果を簡単に実装するためのTIPSです。 上記の画像にマウスオーバーすると、画像のスタイルが切り替わります。 htmlのコードはこんな感じ。 <ul class="photo"> <li><a href="#"><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></a></li> <li><a href="#"><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></a></li> <li><a href="#"><img s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
