- ベストアンサー
スタイルシートのa:activeを使った画像切替ができない
- スタイルシートの設定で画像メニューの切替を行おうとしていますが、a.activeの設定の時のみ画像切替の反応が見られません。どうすればいいでしょうか？
- 画像メニューの切替にはclip:rect(top right bottom left)が使用されています。
- 画像メニューのスタイルシートでa:activeの設定が正しく反映されず、画像切替ができない問題が発生しています。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
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 class="nav"> <ul> <li><a href="../"><span style="background-image:url(./image/btn001.png);">トップ</span></a></li> <li><a href="./profile"><span style="background-image:url(./image/btn002.png);">自己紹介</span></a></li> </ul> </div> とかになるはずです。そしてスタイルシートは 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 ) で検証済み なお、画像は添付ファイルのものを使用しました。 注)タブは、＿に置換してあります。元に戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;} div.nav ul li{width:100px;height:25px;border:solid 1px black;line-height:25px;margin:10px 0;} div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;text-align:center;} div.nav ul li a:visited{background:0 -25px no-repeat;} 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;}/* screenでは隠す */ --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="nav"> ＿＿<ul> ＿＿＿<li><a href="../" style="background-image:url(./image/btn001.png);"><span>トップ</span></a></li> ＿＿＿<li><a href="./profile" style="background-image:url(./image/btn002.png);"><span>自己紹介</span></a></li> ＿＿</ul> ＿</div> </body> </html>
