スタイルシート a:activeで画像を変える

解決済

質問者：itu1989
質問日時：2011/09/29 16:24
回答数：1件

スタイルシートの設定で画像メニューの切替を行おうとしていたんですが
a.activeの設定の時のみ画像切替の反応が見られません。
どうしたらいいでしょうか？
切替はclip:rect(top right bottom left)を使って一枚の画像の表示範囲で切り換えています。

【htmlメニュー部分】
<div class="MENU">
　<a href="./"><img src="btn001.png"></a>
</div>

<div class="MENU">
　<a href="./"><img src="btn002.png"></a>
</div>

【スタイルシート部分】
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;
}

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2011/09/30 19:36

clipプロパティの値の指定方法が間違っています。

また、必ずposition:absolute;と併用しなければなりません。
現在ウェブ標準は、CSS2.1です。この部分は、CSS2からまったく変更されています。
Visual effects ( http://www.w3.org/TR/1998/REC-CSS2-19980512/visu … )
↓変更
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. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
なお、画像は添付ファイルのものを使用しました。
注)タブは、＿に置換してあります。元に戻すこと。

<!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">

＿</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>