CSSテクニックコミュのtext-indentなしのロールオーバー

最近見つけた方法です。
とはいえ、みんなの周知のことでしたらごめんなさい。

方法：
画像のロールオーバーさせたい部分を透明化したgif画像を用いる。
ロールオーバー時と、通常時で背景色を変えればOK。

デメリット：
１．色を変えるだけしかムリ。
２．単色⇒単色の変更しかムリ。

/* CSS */
div#roll a:link, div#roll a:visited {
background-color: #99FFCC;
}
div#roll a:hover, div#roll a:active {
background-color: #FF00CC;
}
img {
border: 0px;
}
div#roll {
font-size: 100px;
}

/* HTML（必要部分のみ） */
<div id="roll">
<a href="#"><img src="001.gif" width="200" height="80" alt="yama3"></a>
</div>

http://r-yama3.com/test/001/
にアップしてあります。

まだ完璧ではないと思うので、みんなでいろいろ考えていきたいと思います。

問題点：
FireFoxでのバグなんですが、上のCSSの
font-size: 100px;
を入れないとうまく透明化されません。100pxにしているのですが、画像の高さの80pxではうまくいきません。

どうでしょうか？？この方法は使えますか？？

コメント(14)

最初
全て
最新の40件

[2] mixiユーザー 05月05日 00:05

それだったら配置するのを透明画像にして背景画像を変更させたらいいのでは？
（私はやりたくありませんが、やむを得ず一度使ったことがあります）

[4] mixiユーザー 05月05日 00:40

何がしたいのかわからないっす

[5] mixiユーザー 05月05日 01:10

・テキストインデントを使わず
・ジャバスクリプトを使わず
ロールオーバーのリンクを実現させたい
ってことですよ。ね？

画像リンクにaltをちゃんと書けばSEO的にも問題ないと思うし。僕も使ったことあります。

が、騙しである事には変わりないので使うのに躊躇しちゃいますよね。。

[8] mixiユーザー 05月05日 01:58

あえて言うなら、PNGじゃないと見た目が汚い。

[9] mixiユーザー 05月05日 02:13

背景色透過gifを使ったロールオーバーテクニックは、どこかのトピックで話題になっていたような気がしますが、気のせいかな。。。
別コミュだったかな。。。

まぁいずれにしても、他者から教えてもらったのでなく、自分で考え出したのだとしたら、なかなか頑張ったと思いますよ。皮肉でも何でもなく、本当に。
CSSに限らず、コーディングテクニックは、自分で試行錯誤を繰り返すことで、上達していきますからね。借り物を使うばかりでは、上達しませんもんね。

[10] mixiユーザー 05月05日 02:16

text-indentによってテキストを表示領域から飛ばしてしまうテクニックとは、HTMLソース上はふつうのテキストでありながら、テキストを非表示にして、同じテキストをもった背景画像を表示させることで、ジャギーのないテキストを表示させよう、というもので、そもそもロールオーバーとは関係ありません。

またCSSによるロールオーバーでは背景には画像が使えるので、yama3さんが挙げておられるデメリットはデメリットではありません。

画像によるテキストの置換も、背景画像（色）の切り替えによるロールオーバーも、古くから使われているテクニックで、決して真新しいものではありません。
まぁただ、画像置換の致命的な欠点＝画像非表示にすると何も表示されない、よりはマシなので、まったく意味がないとも思いませんが。。。

ただ、font-size:100px;は、ブラウザによってはaltの文字が表示されなくなってしまうのでやめたほうがいいです。
それはたぶんFirefoxのバグなどではなく、aをインライン要素のままにしているせいだと思うので、display:block;にして、幅と高さをちゃんと指定すればいいはずです。

あと、透明GIFのマット処理はちゃんとしないと、かえって見づらいです。

[11] mixiユーザー 05月05日 02:50

タイトル名が変なのかな？？
text-indentなし、じゃなくて画像非表示でも対応できる方法ですかね？？

ロールオーバーをするときに、text-indent: -9999px;や、display: none;にすると、画像非表示の環境で何も表示されないんじゃないですか？

画像非表示の人を完全に排除するんだったらtext-indentやnoneでもいいと思いますけど？？

>>ginnez さん
＞display: blockにして。。。
ありがとうございます。display: block;ならうまくいくみたいです。

gif画像orPNG画像についてはこれから試してみる予定です。

[13] mixiユーザー 05月05日 04:18

http://mezzoblue.com/tests/revised-image-replacement/index.php
これのGilder/Levin Methodとかいうのを使った方がいいかと思います。これの空spanの中にa入れてdisplay:block,width,height指定でリンクの領域確保したりとか。CSS Offの人が気になるなら隠れてるテキストにもaマークアップしたりとか。

というか、そこまでアクセシビリティに配慮したいなら普通にjavascriptでやるのが一番いいのかなーと。javascript offでロールオーバーできなくたってサイトの使用に支障がでるわけでもないですし。

PNG使ったらIE6は透過PNG非対応だったような気がしたから、それはまたそれで別の対策が必要で、それこそ誰が見ても意味分からんソースになってしまうのではないかなーと。

ログインすると、みんなのコメントがもっと見れるよ