質問: スタイルシート a:activeで画像を変える スタイルシートの設定で画像メニューの切替を行おうとしていたんですが a.activeの設定の時のみ画像切替の反応が見られません。 どうしたらいいでしょうか? 切替はclip:rect(top right bottom left)を使って一枚の画像の表示範囲で切り換えています。 【htmlメニュー部分】 ![](./) ![](./) 【スタイルシート部分】 img.menu{ position:absolute; } div.menu{ border:none; position:relative; float:left; } div.menu a:link img{ clip:rect(0px 133px 25px 0px); top:0px; } div.menu a:visited img{ clip:rect(0px 133px 25px 0px); top:0px; } div.menu a:hover img{ clip:rect(50px 133px 75px 0px); top:-50px; } div.menu a:active img{ clip:rect(25px 133px 50px 0px); top:-25px; } よろしくお願いします。
回答: clipプロパティの値の指定方法が間違っています。 また、必ずposition:absolute;と併用しなければなりません。 現在ウェブ標準は、css2.1です。この部分は、css2からまったく変更されています。 visual effects ( http://www.w3.org/tr/1998/rec-css2-19980512/visufx#clipping ) ↓変更 visual effects ( http://www.w3.org/tr/css2/visufx.html#clipping ) ★clipの指定や、詳細度の設定は変更されていますから注意!! さて、本題ですが、リンクに対してユーザーの動作によって画像を変更する場合は、clipではなくbackground-positionを使うほうが一般的で、htmlの意味的にも良いでしょう。 すなわち、この場合はナビゲーションですからhtmlは、 * トップ * 自己紹介 とかになるはずです。そしてスタイルシートは div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;} div.nav ul li{width:50px;height:25px;} div.nav ul li a{display:block;width:100%;width:100%;background-position:0 0;} div.nav ul li a:visited{background-position:0 -25px;} div.nav ul li a:hover,div.nav ul li a:focus{background-position:0 -50px;} div.nav ul li a:active{background-position:0 -75px;} div.nav ul li a span{visibility:hidden;} 具体的な例は,下記になります。 ★another html-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★w3c css 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み なお、画像は添付ファイルのものを使用しました。 注)タブは、_に置換してあります。元に戻すこと。 _ _サンプル _ _ _ _ _ _ _サンプル ==== _ __ ___* トップ ___* 自己紹介 __ _