ロールオーバー
-
0 名前： kio ： 2006/01/15 01:43
- はじめまして。
現在製作中のウェブサイトにおいて、メニュー部分にCSSを使ったロール
オーバーを使用しています。
しかし、なぜかリンク先のページがキャッシュされないと、ロールオーバー
してくれません。
また、キャッシュされたあとメニューにマウスを乗せても１秒くらい背景
画像が非表示になることがあります。
しばらく乗せていると表示され、一度表示されるとその後は何の違和感も無く
ロールオーバーしてくれます。
なお、ロールオーバーの確認は、WinXPSP2下のIE6.0 Opera8.5 N6.2 Firefox1.5
で行いましたが、結果はどれも同じでした。
-
1 名前： kio ： 2006/01/15 01:43
- 以下ソースです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta name="author" content="aaa">
<link rel="stylesheet" type="text/css" href="aaa.css">
<title>sample</title>
</head>
<body>
<h1><a name="top">サイト名</a></h1>
<div id="all">
<div id="contents">
<ul>
<li><a href="info.html" class="info">インフォメーション</a></li>
<li><a href="rules.html" class="temp">テンプレート</a></li>
<li><a href="link.html" class="link">リンク</a></li>
<li><a href="mail.html" class="mail">メール</a></li>
<li><a href="./" class="home">ホーム</a></li>
</ul>
</div>
<div id="body">
<h2>リンク</h2>
<p>自称使える（厳選？）リンク集･･･。基本的にタダで使えるものばかり載せています。リンク先のサイト様では失礼の無いようにお願いいたします。<span class="hide">（実は私のお気に入りから関係ありそうなのだけピックアップしてきたなんてのはヒミツですョ）</span></p>
<h3>リンク集</h3>
<p>ああああ</p>
<h3>html CSS JavaScript</h3>
<p>ああああ</p>
<h3>フリー素材</h3>
<p>ああああ</p>
<h3>フリーフォント</h3>
<p>ああああ</p>
<h3>その他</h3>
<p>ああああ</p>
<h3>別格</h3>
<p>ああああ</p>
<div id="bottom"><a href="#top">上へ</a></div>
<hr>
<div id="c">Copyright © 2005 <a href="mail.html">aaa</a> All Rights Reserved.</div>
</div>
<br class="clear">
</div>
</body>
</html>
-
2 名前： kio ： 2006/01/15 01:43
- 以下CSSです。
body{
scrollbar-face-color: #393332;
scrollbar-track-color: #fffffb;
scrollbar-arrow-color: #fffffb;
scrollbar-highlight-color: #fffffb;
scrollbar-shadow-color: #fffffb;
scrollbar-3dlight-color: #fffffb;
scrollbar-darkshadow-color: #fffffb;
background-color: #fffffb;
margin: 0 auto 0 auto;
padding: 0 10px 0 0;
text-align: center;
}
body,td{
color: #393332;
font-size: 84%;
font-family: Osaka;
line-height: 150%;
}
br,input{
letter-spacing: normal;
}
h1{
display: none;
}
#all{
width: 620px;
margin-right: auto;
margin-left: auto;
}
/* コンテンツ部 */
#contents{
width: 60px;
float: left;
padding: 1em 0;
}
#contents ul{
list-style: none;
}
#contents a{
width: 20px;
height: 44px;
display:block;
text-indent: -10000px;
text-decoration: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: bottom;
}
#contents a.info:link,a.info:visited{ /* info */
background-image: url(info-1.gif);
margin: 0 0 1px 0;
}
#contents a.info:active,a.info:hover{
background-image: url(info-2.gif);
margin: 0 0 1px 0;
}
#contents a.temp:link,a.temp:visited{ /* temp */
background-image: url(temp-1.gif);
margin: 0 0 1px 0;
}
#contents a.temp:active,a.temp:hover{
background-image: url(temp-2.gif);
margin: 0 0 1px 0;
}
#contents a.link:link,a.link:visited{ /* link */
background-image: url(link-1.gif);
margin: 0 0 1px 0;
}
#contents a.link:active,a.link:hover{
background-image: url(link-2.gif);
margin: 0 0 1px 0;
}
#contents a.mail:link,a.mail:visited{ /* mail */
background-image: url(mail-1.gif);
margin: 0 0 1px 0;
}
#contents a.mail:active,a.mail:hover{
background-image: url(mail-2.gif);
margin: 0 0 1px 0;
}
#contents a.home:link,a.home:visited{ /* home */
background-image: url(home-1.gif);
margin: 9px 0 0 0;
}
#contents a.home:active,a.home:hover{
background-image: url(home-2.gif);
margin: 9px 0 0 0;
}
-
3 名前： kio ： 2006/01/15 01:43
- /* 本文部 */
#body{
width: 508px;
float: left;
border: solid #000000;
border-width: 0 1px;
padding: 2em 1.5em 1em 1.5em;
text-align: left;
}
h2{
font-size: 150%;
}
h3{
margin-bottom: 0;
font-size: 100%;
font-weight: normal;
}
h3:before,h3:after{
content: "■";
}
.p{
margin-top: 0;
text-indent: 1em;
}
.p2{
margin-top: 0;
margin-left: 1em;
}
#body ol{
margin-top: 0;
}
.img{
border: 0;
display: inline;
}
.timg{
margin-right: 1em;
border: 1px solid #333333;
display: inline;
float: left;
}
img{
display: none;
}
.hide{
color:#afa7a5;
}
#bottom{
text-align: right;
}
hr{
height: 1px;
border-width: 1px 0 0 0;
border-style: dashed;
border-color: #393332;
}
.mtdl{ /* メールのテーブル・左 */
padding: 0.7em 1em 0.7m auto;
text-align: right;
}
.mtdr{ /* メールのテーブル・右 */
padding: 0.7em 0 0.7m 0;
}
.inp{
border: 1px solid #afa7a5;
background-color: #fffffb;
scrollbar-face-color: #afa7a5;
scrollbar-track-color: #fffffb;
scrollbar-arrow-color: #fffffb;
scrollbar-highlight-color: #fffffb;
scrollbar-shadow-color: #fffffb;
scrollbar-3dlight-color: #fffffb;
scrollbar-darkshadow-color: #fffffb;
color: #393332;
}
p input{
border: none;
color: #393332;
}
.clear{ /* 回り込み解除 */
clear: both;
}
長くなってしまいすみません。
kio
-
4 名前： you ： 2006/01/15 01:43
- 私もロールオーバーで悩んでいます。
ＣＳＳ見たのですが リンクの設定が無いのじゃないかな？
<ul>
<li id="info"><a href="info.html">インフォメーション</a></li>
<li id="info"><a href="rules.html">テンプレート</a></li>
<li id="info"><a href="link.html">リンク</a></li>
<li id="info"><a href="mail.html">メール</a></li>
<li id="info"><a href="./">ホーム</a></li>
</ul>
#contents ul { list-style: none; margin: 0px; padding: 0px; }
#contents li { width: 95px; height: 15px; margin: 0px; padding: 0px; text-indent: -9999px; display: block; }
#contents a { text-decoration: none; width: 95px; height: 15px; display: block; }
リンクボタン
#contents li#info { background: url(○○○.gif) no-repeat; }
マウスオーバーのとき
#contents li#info { a:hover { background: url(○○○.gif) no-repeat; }
私は、こんな感じで設定していますが ここの掲示板に書き込みしたいますが
センター揃えのサイトなのですが ＩＥ5.0だけは、ロールオーバーが
聞きません。それ以外は動作確認済みなのですが
横幅100％のサイトならリンク部分を絶対配置にすれば大丈夫かと思いますが
何分勉強中なものですいません 間違ってたら
-
5 名前： Pid ： 2006/01/15 01:43
- >>0
> なぜかリンク先のページがキャッシュされないと、ロールオーバーしてくれません。
というのはよく分かりません（何か先読み系のソフトをお使いですか？）が，
> メニューにマウスを乗せても１秒くらい背景画像が非表示になる
のは，ページの読み込みが終わった時点ではまだホバー用画像が読み込まれておらず。ホバーした時点でようやく画像が読み込まれるからです。ですから，CSS ロールオーバーでは一般に，使用する画像を全て一つの画像にまとめて，一気に読み込ませ，background-position で表示したい部分を調節します。
※ WinIE が属性セレクタ（ a[href="info.html"] { ... } ）に対応してくれれば，いちいち class="info" とか付けなくて済むのですけどね……。
※なお本筋とは全然関係ありませんが，"contents" や "body" は id 名ではなく class 名の付け方だと思いますが，いかがでしょう。
>>4
・一つの HTML 文書の id 属性値はユニークでなければなりませんので，同じ id 属性値が何度も出現することはありません。
・#contents li#info { a:hover というセレクタはありません。
※たぶん，コピペで生じた単なる誤植だと思いますが，念のため (^^;)。
-
6 名前： kio ： 2006/01/15 01:43
- you さん、Pid さん、レスありがとうございます。
> 何か先読み系のソフトをお使いですか？
いいえ、そのようなものは使用しておりません。
> ページの読み込みが終わった時点ではまだホバー用画像が読み込まれておらず
あぁ、そうか。ホーバー時の画像は先にこっそり読み込ませておかなければならないんですね。
わかりました。
> ※なお本筋とは全然関係ありませんが，"contents" や "body" は id 名ではなく class 名の付け方だと思いますが
そうなんですか？私は、何が id にふさわしくて、何が class にふさわしいのかなど考えず、
単にわかりやすいものを名付けていました。
kio
-
7 名前： Pid ： 2006/01/15 01:43
- > > リンク先のページがキャッシュされないとロールオーバーされない
少なくとも，HTML/CSS の記述によって，多くのブラウザにそういう問題が生じるとは考えにくいです。
> > 先読み系のソフト
たとえば，Norton Internet Security 等は，アンカーをクリックする前にリンク先を先読みして，危険なものが無いかチェックしますよね。ですから，監視用ソフトが原因だと私は推測しますが，いかがでしょう。
> 何が id にふさわしくて、何が class にふさわしいのか
基本的に，id は「文書断片の識別子（特定の名前）」，class は「要素の分類名」です。"body" や "contents" は「特定の名前」ではなく「要素の分類名」だと私には思えたもので。
※ちなみに，必要な画像を一枚にまとめて background-position で調節するのは，『JavaScript でワイヤーフレーム』のように応用することもできます。
http://homepage2.nifty.com/m_kamada/di200511.htm
-
8 名前： kio ： 2006/01/15 01:43
- Pidさん、レスあちがとうございます。
> > > 先読み系のソフト
> たとえば，Norton Internet Security 等は，アンカーをクリックする前にリンク先を先読みして，危険なものが無いかチェックしますよね。
そーなんですか。ノートンはいってます。一応･･･。ということで、先読み系のソフト入ってました。すみません。
画像を使わないタイプのホーバーはキャッシュの有無には左右されないんですけどね。
> > 何が id にふさわしくて、何が class にふさわしいのか
はい、確かに要素名の分類に使用しております。
だから id ではなく、class が適当なんですね。
kio
