リンクテキストにマウスオーバーで色を変化させたり、というのはよくあると思います。
それではなく、リンクテキストにちょっとした装飾を施しちゃいましょう。
例えば、リンク文字の横に矢印の画像を入れたりとか。n
さてさて、透過 PNG 画像。使えるととても便利で、デザインの幅も広がります。
しかし、Win IE では透過機能が使えないという大問題がっ。
（またおまえか！ とか思いますねｗ）
まぁ IE7 になればちゃんと表示されるようになるみたいですが。n
しかしながら、Win IE でもなんとか見れる方法があります。
それが今回の記事の主題です(*'-')
CSSによる画像を使ったロールオーバーです。
すでに色々なところで言われていて、結構ポピュラーなことだと思いますが、
まぁ備忘録ってことでお付き合いくださいｗ
通りすがりさんに指摘されたので追記です。
ここで紹介しているテクニックは、「背景画像を使用した」テクニックです。
そのため、画像を OFF にして閲覧している人がいた場合、
通常の画像であれば、alt 属性に書かれている内容が表示されるため問題ありませんが、
このテクニックの場合、メニューになにも表示されなくなってしまうので注意が必要です。
新しく、これで決まり？な画像置換 - DKIR という記事を書きました。
こちらは "画像OFF、CSS ON でも問題ない" というメリットがあるのでオススメです。
この後のエントリーで CSSのみでプルダウンメニューを作る を書き足しました。こちらではJavascriptを使わずにIE6を含めたすべてのブラウザでプルダウンメニュー（ポップアップメニュー）を実現しています。
Flash や JavaScript で実現されるポップアップメニューを CSS で実現するやり方を考えてみたり。
結局、IE にあわせると JavaScript を介さないといけなくなるんですが、いちおう Firefox でならば JavaScript を使わないで実現することはできました
簡単に解説すると、ひとつのボックス要素の中にポイントするとポップアップする部分のメニューを書きます。
それのボックス要素内にdisplay:noneをもつ要素（これがポップアップで出る部分）を書き、通常時には隠れるようにしておく。
そして最初に書いたメニュー部分（サンプルでは li 要素）に:hover擬似属性を設定する。（li:hover←これが IE だと使えないんですよねー）n
のように、:hover時にのみ block 要素になるように設定を追加します。
そうすることで、:hover時だけ姿を現す、まさにポップアップメニューになります。
とりあえず、今回は IE にも対応させようってことで JavaScript の onmouseover で上のli:hover divの部分の代用をしてます。n
IE7 で :hover が使えるようになるといいなぁ・・。n
合わせて読むと役に立つかもなエントリー
png 画像はアルファ値を保存できる画像形式で、影などの徐々に透明になっていくような画像を作るときにとても便利な画像だ。
が、これがまたIEのあほが認識しない。透明部分を白く表示するもんだから、違和感この上ないのだ。n
背景が一色など、決まったものであれば白くなる部分にその色を敷いて、擬似的にきれいな影を表現できるが、背景が写真や複雑なパターンなどだとそうはいかない。n
ボックスを固定すれば問題ないが、それでは柔軟性に欠ける。
そこで、IE とその他の CSS を振り分けることを利用して、別々の画像を読み込ませることでこれを実現してみた。n
また、IE には独自仕様で影をつけるフィルタがあったりする。n
やり方は簡単、まず振り分けようの CSS を書き、（ここらへんは情報溢れてるので割愛）
IE には影のついていない画像を読み込ませる。そして、そのボックスに影をつけるフィルターを適用する。n
そして IE 以外の、png 形式を正しく表示できるブラウザ用に、背景として png 画像を読み込ませる。
これで完成だ。n
まぁ IE7 は png 形式をサポートするみたいだからいらなくなるかもしれないけど、
ま、思いついちゃったからとりあえずのっけとくｗ
なんか不具合があったらコメントにでも残しておいてください(;´□｀)
clear を使わずに float の親ボックスの背景を表示する方法を発見。
まだ試してはないけど、これが特に不具合なく動く（将来的にも）なら、かなり便利そう。
内容は、親ボックスにoverflow: auto;を追加するだけ。
clear を使った方法だとちょっとした問題があったりしたので、今度使ってみようと思う。n
合わせて読むと役に立つかもなエントリー
とあるサイトの記事を読んで、以前から考えていたものを実現へと近づけることができた。
それは CSS のみで JavaScript のような動作をさせる、というもの。
つまり、マウスオーバーで隠れていたコンテンツを表示させ、マウスアウトで再び隠す、というもの。
:hover をうまく利用したものだ。
ただ、IE の場合、:hover が a 要素にしか使えないため、隠す部分を a 要素配下にする必要がある。
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
