CSSでロールオーバーメニューを作ります。
一般的に、マウスのロールオーバーによる画像の切り替えは、JavaScriptを使うのですが、
CSSのアンカー(<a>)の仕様を上手く利用してやれば、
CSSだけで実現可能です。
実際に、このサイトのナビゲーションメニューで使用しています。

このメニューの鍵は、用意する画像にあります。
例えば、このサイトのメニューの場合、青または橙に見えている部分は実は透過です。
透過に見えている部分は、実は背景色と同じ白。
そして、設定しているアンカーで、マウスが重なったときの背景色を変化させています。

CSS抜粋
<style>
a:link {background-color:#000066;}  # 通常のリンクの状態
a:visited {background-color:#000066;}
a:active {background-color:#ff6600;}
a:hover {background-color:#ff6600;}  # マウスがリンクに乗った時の状態
</style>

種明かしをすれば非常に単純なことです。
しかし意外と分からないし、JavaScriptより遙かに簡単。


【応用編】
今回のような疑似文字色変化に加えて、
設定するCSSを、背景色ではなく背景イメージにして、
置く画像をそれに合わせた透明画像(Spacerなど)にしてやれば、
普通の画像によるロールオーバーも可能です。

← マウスを置いてください

コード例
<style> a:link {background:url(http://www.nobodyplace.com/img/icon/diary/54.gif) #000066;border:none;} a:visited {background:url(http://www.nobodyplace.com/img/icon/diary/54.gif) #000066;border:none;} a:hover {background:url(http://www.nobodyplace.com/img/icon/diary/51.gif) #ff6600;border:none;} </style> <a href=""><img src="http://www.nobodyplace.com/img/spacer.gif" width=14 height=14></a>


これらを利用することで、多少はJavaScriptを減らすことが出来るのではないでしょうか。
(JavaScriptが悪いとは言いませんがユーザを選ぶことも事実なので)
もちろん、スイッチが画像以外にある場合や、より複雑な処理が必要な場合は、
CSSでは対処できません。
素直にJavaScriptに頼りましょう。
(個人的はそういう装飾は、避けますけど)

  • About

    I'm a web designer/programmer in Kyoto, Japan. Also work as a blogger, DJ.

    NOBODY:PLACE is my personal blog since 1998. Everything I'm interested in is here.

    See Also
    Other Works
    Feed
  • Recent Hatena Bookmark
  • Monthly Archives
    Categories