メニューボタン(リンク入り)に画像を使っていますが、マウスポインタを乗せた時に(今ここを選択していることが分かるように)色が変化したり、枠が付いたりするようにしたいと考えています。
いろいろ調べてみたのですが、1つの方法として次のように書けばいいようです。
(CSS)
a{
display:block;
width:50px;
height:50px;
background:url(img_02.png) no-repeat 0px 0px;
}
a:hover img{
filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
opacity: 0.0;
}
(HTML)
<a href="#"><img src="img_01.png"></a>
しかし、全く変化ありませんでした。
GIF画像を使っているのですが、これをPNG形式の画像に変更して(CSS)のbackground:url(img_02.png) no-repeat 0px 0px;の中の「img_02」の部分を変更すればいいのでしょうか?
それとも「02」の部分だけ変更すればいいのでしょうか?
(HTML)も同様に「img_01」なのか「01」の部分だけなのか?
また、(CSS)にあるdisplay:block;
width:50px;
height:50px;
は書く必要があるのでしょうか?
画像を使っているのでわざわざ書く必要がないとも思うのですが・・・。
何が間違っているのか分かりませんので、お気づきの点や、その他に良い方法がありましたら教えてください。
どうぞよろしくお願いします。
No.1ベストアンサー
- 回答日時:
原理を理解すれば、何をしていすればよいかおのずと解ると思います。
これは、背景画像でボタン画像の代用するの小技と、
マウスホバー時に画像の透明度を変える小技の組み合わせです。
まず、
a{
display:block;
width:50px;
height:50px;
background:url(img_02.png) no-repeat 0px 0px;
}
の部分で<a></a>を50px×50pxのボックス表示にして、背景画像
としてimg_02.pngを1枚表示させます。しかし<a></a>内には
<img src="img_01.png">があるので、背景画像は見えない状態です。
次に
a:hover img{
filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
opacity: 0.0;
}
は、<a></a>がマウスホバーされた時、その子供の<img>の
透過度(opacity)を透明(0)にしています。
同じようなのを3つも指定しているのは、ブラウザーやそのバージョン
によって、opacity属性指定の実装方法が異なるからです。
<IE9 からは opacity:0.0 だけでよいかも(未確認)>
ご回答いただきありがとうございます。
画像が2枚重なった状態で、ホバー時に上の画像が透過するという仕組みですね。
なるほど、わかりました。
No.3
- 回答日時:
CSSのみで色々な方法がありますが、一長一短で100%完璧な方法は存在しない。
filterだけでって事ではないようなので、以下、考え方(ヒントだけ)ですが、
(1)
img_01.pngの画像を透明GIFに変更して、背景画像を切り替える。
a{ background:~~;}
a:hover{ background:~~;}
(2)
<a href="#">テキスト</a>として
text-indent:-9999; でテキストを表示させずに(1)の要領で背景画像を表示させる。
(3)
<a href="#"><img src="img_01.png"></a>の
img_01.pngとimg_02.pngを1枚の画像にして、
positionで画像の座標を変化。
(4)
img_01.pngとimg_02.pngを1枚の画像にして、
a:hover img{ margin-top: -○○px;}
負のマージンを使う方法。
(5)その他・・・
枠線は、画像自体に線を描くか
a:hover img{border:~~;}とか。
display:block; width:50px; height:50px; の件は、
ケースバイケースで必要。
ご回答いただきありがとうございます。
(1)と(5)が使えそうですね。
(5)だと、枠線が表示されるのはいいのですが、枠線の分だけ幅が広がるので、他のセルも影響を受けて揺れてしまいます。
これを解消する方法があれば教えていただけませんか?
No.2
- 回答日時:
「その他に良い方法」
javascript使用OKとするなら、CSSで小技使う必要は無いです。
<img>のmouseoverイベントとmouseoutイベントで画像のURLを変えてしまうだけです。
<a href="#"><img src="img_01.png" onmouseover="this.src='img_02.png'" onmouseout="this.src='img_01.png'" alt="リンク画像"></a>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像をクリックして元に戻すには
-
footerの背景が切れて、背景画...
-
【HTML/CSS】ボタンの枠が伸び...
-
CSSの左横に隙間ができてしまい...
-
ボタンをセル内一杯に表示させ...
-
アップロードするとレイアウト...
-
リンクを知らせる手のマークが...
-
<img src=** border=0>の一括指定
-
クリッカブルマップがきかない!?
-
WordPressで画像に枠が入ってし...
-
FC2カートのテンプレートでの商...
-
マウスオーバーで画像を拡大する。
-
下記が私のHPのタグなのですが
-
cssで画像を均等に配置する方法...
-
htmlの文字が縦書きになる
-
1時間30分を簡単に表したいで...
-
含む含まないという概念自体の...
-
Macで画像の切り抜きできないの?
-
1から100までの自然数のうち、2...
-
「諸要素」とはどういう意味で...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
画像の場合のみ、下線を消す方...
-
HTMLのIMAGEに。。
-
XML画像データををHTMLで簡単に...
-
table で画像をピッタリとくっ...
-
機種依存文字、m2(平方メート...
-
画像をクリックして元に戻すには
-
footerの背景が切れて、背景画...
-
UDP通信を使うチャットプログラ...
-
水面の波紋
-
HTMLの文章中の画像のベースラ...
-
画像サイズの変更の仕方を教え...
-
3つの画像を中央に寄せて表示さ...
-
ホームページで画像を横に並べ...
-
cssで一部の文字や画像を中央に...
-
cssで、チェックボックスの画像...
-
favicon.ico はもういらない?
-
チェックボックスの影
-
背景画像が透けて見えるボタン...
おすすめ情報