【お知らせ】まとめて検索などの提供終了

スタイルシートの設定で画像メニューの切替を行おうとしていたんですが
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;
}



よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

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">
<!--
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>
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード


人気Q&Aランキング