HP製作でオーバーマウスがうまくいきません。

締切済

質問者：gerugugu2
質問日時：2012/07/17 01:24
回答数：3件

現在、Webサイトを製作中なのですが
CSSでのオーバーマウスの動作がうまくいきません。
コードは以下の通りなのですが

イメージとしては、添付画像の様にA,Bのような画像で作ったボタンがあり
そこのボタンにカーソルを合わせると
Aのようにボタンの色が変化し
尚且つ、説明欄にAの説明が表示されるようにというイメージなのです。

しかし、実際のところは動作をせず・・・という状態です。

コードで説明しますとはセレクト、ブログ、コンタクトと何項目かあるんですが
その場合は一番下のコンタクトしか動作しない状態なのです。
他はリンクタグすら正常に動きません。
思考錯誤をしていたところ　
各所にある<ul class="menu">を削除したところ
レイアウトは崩れるのですが　動作はしてくれました。
その部分をどのように修正すればいいのか
もしくは、もっと根本的な部分から修正が必要なのか
お手上げ状態です、ご助言をお願い致します。

contact.png　＞これがメニュー側で
contact_un.png　＞これが説明側に表示されるべき画像です。

<html>
<head>
<meta content="text/html; charset=Shift_JIS" http-equiv="content-type">
<title>タイトル</title>
<style type="text/css">

BODY {
background-image:url(min.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; }

img {
border-style:none;
}

.menu {
padding-top:200px; /*--重ならない程度に押し下げています。--*/
}
.menu a span { /*--オンマウスで表れる場所---*/
display:none; /*--最初は隠す。これがキモ。
検索エンジンに嫌われる理由でもある---*/
padding:5px;
}

.menu a:link{
/*--文字色　マウスを乗せたくなる色を---*/
}
.menu a:visited{color:#000;}
.menu a:hover, .menu a:visited{ /*--ここから下、%使う時はIEに注意---*/
display:block;
text-decoration:none;
}

.menu a:hover .setumei_s { /*--オンマウスで表れる場所の指定---*/
display:block;
position:absolute; /*--絶対位置・相対位置それぞれ長短あり。---*/
top:350px;
left:110px;
width:680px;
font-weight:bold;
line-height:1.5;
}

.menu a:hover .setumei_b { /*--オンマウスで表れる場所の指定---*/
display:block;
position:absolute; /*--絶対位置・相対位置それぞれ長短あり。---*/
top:310px;
left:110px;
width:680px;
font-weight:bold;
line-height:1.5;
}

.menu a:hover .setumei_c { /*--オンマウスで表れる場所の指定---*/
display:block;
position:absolute; /*--絶対位置・相対位置それぞれ長短あり。---*/
top:270px;
left:100px;
width:680px;
font-weight:bold;
line-height:1.5;
}

.menu a:hover .second { /*--オンマウスで表れる場所の指定---*/
top:600px;
left:5px;
width:23px;
}summary_un

#image a{
display:block;
background:url() no-repeat;
text-decoration:none;}
#image a:hover{
color:orange;
background:url(info_on.png) no-repeat;
}
</style>
</head>
<body
style="background-color: rgb(0, 0, 0); margin-top: 0px; height: 27px; background-image: url(back.jpg);">


<div
style="position: absolute; top: -10px; left: -20px; width: 600px; height: 87px;"
id="image">
<ul class="menu">
<a href="リンク"><img src="Mission.png"> <span
class="setumei_m"><img src="Mission_un.png"></span></a>
</ul>
</div>


<div
style="position: absolute; top: 31px; left: -20px; width: 600px; height: 87px;"
id="image">
<ul class="menu">
<a href="リンク/"><img src="blog.png"> <span
class="setumei_b"><img src="blog_un.png"></span></a>
</ul>
</div>


<div
style="position: absolute; top: 70px; left: -20px; width: 600px; height: 87px;"
id="image">
<ul class="menu">
<a href="リンク"><img src="contact.png"> <span
class="setumei_c"><img src="contact_un.png"></span></a>
</ul>
</div>

</body>
</html>

通報する

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

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2012/07/17 19:51

ごく簡単なサンプル書いてみました。

ただし、本来は画像になっている説明文などは、きちんと記述しておくべきです。次善の策として画像のaltに書いておいても良いでしょう。
[誤]
<li>
　　<a href="./Summary"><img src="summary.png" width="180" height="32" alt="Summary"></a>
　　<p>
　　　　<img src="summary_un.png" width="332" height="70" alt="ここにテキストでリンク先の詳しい説明をかいておく。">
　　</p>
</li>
[正]
<li>
　　<a href="./Summary">Summary</a><span>For an overview of the event
Noted some Rough content
It's about "king Fish"
Please confirm participants.</span>
</li>
とか・・・

　いずれにしても、
・スタイルシートを読まないPC以外のブラウザ
　　スマホでない携帯電話とか、読み上げソフト、点字端末・・
・検索エンジン
・プリンター
で利用できなきゃHTMLで作成する意味がない。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
→テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )は、強く非推奨なのです。

★サンプルは、スマホには対応はしていますから小さなウィンドウでも問題なく利用できるでしょうが、その他のユーザーエージェント(プリンター、携帯電話、読み上げソフト、点字端末、検索エンジンには未対応です。
★ボタン画像は無駄な余白を切り捨てて、下記のサイズに切り抜いています。必ず下記サイズに切り抜いてテストしてください。
★HTMLも極めて簡単できちんと文書構造だけを示していることを確認すること。
★スタイルシートが、文書構造を基に書かれていて簡単でわかりやすいこと。
　先でどのようにもデザインを変えられること
★オリジナルと異なりスタイルシートなしで表示しても利用できること
・・・などを確認してください。

<!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>
＿<div class="header">
＿＿<h1><img src="tile.png" width="391" height="51" alt="OPERATION KINGFISH"></h1>
＿</div>
＿<div class="section">
＿＿<h2>サイトマップ</h2>
＿＿<ul class="nav">
＿＿＿<li>
＿＿＿＿<a href="./Misson"><img src="summary.png" width="180" height="32" alt="Summary"></a>
＿＿＿＿<p>
＿＿＿＿＿<img src="summary_un.png" width="332" height="70" alt="ここにテキストでリンク先の詳しい説明をかいておく。">
＿＿＿＿</p>
＿＿＿</li>
＿＿＿<li>
＿＿＿＿<a href="./info.html"><img src="info2.png" width="248" height="32" alt="Infomation"></a>
＿＿＿＿<p>
＿＿＿＿＿<img src="info_un.png" width="370" height="104" alt="ここにテキストでリンク先の詳しい説明をかいておく。">
＿＿＿＿</p>
＿＿＿</li>
＿＿＿<li>
＿＿＿＿<a href="./Misson"><img src="mission.png" width="320" height="32" alt="Misson"></a>
＿＿＿＿<p>
＿＿＿＿＿<img src="mission_un.png" width="370" height="104" alt="ここにテキストでリンク先の詳しい説明をかいておく。">
＿＿＿＿</p>
＿＿＿</li>
＿＿＿<li>
＿＿＿＿<a href="./blog"><img src="blog.png" width="100" height="32" alt="Blog"></a>
＿＿＿＿<p>
＿＿＿＿＿<img src="blog_un.png" width="370" height="102" alt="ここにテキストでリンク先の詳しい説明をかいておく。">
＿＿＿＿</p>
＿＿＿</li>
＿＿＿<li>
＿＿＿＿<a href="./contactUs.html"><img src="contact.png" width="240" height="32" alt="Contact Us"></a>
＿＿＿＿<p>
＿＿＿＿＿<img src="contact_un.png" width="370" height="104" alt="ここにテキストでリンク先の詳しい説明をかいておく。">
＿＿＿＿</p>
＿＿＿</li>
＿＿</ul>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/07/17 10:37

No.2です。

追加情報をお願いします。
・リンクボタンのサイズ、画像を使うならそのサイズ
・リンク先の説明の画像サイズ
・それぞれの表示位置

この回答への補足

お世話になります、質問者です。
アドバイスありがとうございます。

リンクのボタンのサイズなのですが477*39になります。
また、2点目の説明画像のサイズは何パターンかあり
それぞれがサイズが異なるのですが380ｘ100程度のものです。
位置ですが、どのように表記すればよいのかわからないので
サイトのURLを添付いたします。
こちらがそのサイトです。
http://urx.nu/1z0X

補足日時：2012/07/17 12:11

通報する

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2012/07/17 09:37

＞もっと根本的な部分から修正が必要なのか

だと思います。

1) まず、HTMLを復習しましょう。
　同じidはページ内に一箇所しか存在できません。id="image"が何度も登場している!!
2) それぞれの要素にはどんな要素を含むか決められています。
　 ul要素にはli以外含むことはできません。
　<ul>
　　<li><a href=""></a></li>
　★<!ELEMENT UL - - (LI)+ -- unordered list --> ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　　要素ULにはli要素をひとつ以上含むと書かれています。
　　これを<ul><a>のように記述するとブラウザは文書構造を理解できないため適当に補完しますがその解釈はブラウザによって異なるためスタイルシートが思い通りに適用されません。

3) HTMLは文書構造だけを記述するものです。用意されたタグで足りないときはclassやidを使って文書構造を補完します。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )］より

　素のHTMLを記述したら、ネット上のValidatorで文法チェックを必ず行ってから次に進みます。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
・The W3C Markup Validation Service ( http://validator.w3.org/ )
・Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html )

4) スタイルシートはその文書構造を元にセレクタでデザインしたい要素を特定してデザインします。

5) CSS(カスケーディングスタイルシート)にはカスケーディングという重要な仕組みがあります。それがCSSの命です。それを知っておかなきゃ使えません。
　#(一意セレクタ)での指定は詳細度b=1ですが、HTML要素のstyle属性で指定すると、詳細度がa=1となり上書きできなくなります。
　重要→6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )
　　これはCSS2.1で変更されたため、CSS2.1のものをあげておきます。

添付画像がないのでシカとはわかりませんが、HTMLは次のようなものになると思います。
　これなら誰でも書けるし、後でメンテナンスも容易。へんなコメントも不要(classはそのために書くのですから)
　また、文書構造しか書いてないので、HTMLを変更しなくても、どのようにもデザインできます。

★Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html )
★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
にて検証済みのウェブ標準(HTML4.01strict)
(注) class名は文書構造を補完する目的でつけてある。HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )名とその用途を参考にしてある。
(注) 画像を読み込まない状態で見て置くこと--googleが見ている姿--
(注) タブは＿に置換してあるので戻すこと。

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

＿</style>
</head>
<body>
＿<div class="header" id="TOP">
＿＿<h1>タイトル</h1>
＿</div>
＿<div class="section">
＿＿<ul class="nav" id="SITE_MAP">
＿＿＿<li>
＿＿＿＿<a href="./Misson"><img src="Mission.png" width="80" height="40" alt="Misson"></a>
＿＿＿＿<p>
＿＿＿＿＿<a href="./Misson"><img src="Mission_un.png" width="480" height="360" alt="ここにテキストでリンク先の詳しい説明をかいておく。"></a>
＿＿＿＿</p>
＿＿＿＿
＿＿＿＿
＿＿＿</li>
＿＿＿<li>
＿＿＿＿<a href="./blog"><img src="blog.png" width="80" height="40" alt="Blog"></a>
＿＿＿＿<p>
＿＿＿＿＿<a href="./blog"><img src="blog_un.png" width="480" height="360" alt="ここにテキストでリンク先の詳しい説明をかいておく。"></a>
＿＿＿＿</p>
＿＿＿</li>
＿＿＿<li>
＿＿＿＿<a href="./links.html"><img src="contact.png" width="80" height="40" alt="Contact Us"></a>
＿＿＿＿<p>
＿＿＿＿＿<a href="./links.html"><img src="contact_un.png" width="480" height="360" alt="ここにテキストでリンク先の詳しい説明をかいておく。"></a>
＿＿＿＿</p>
＿＿</ul>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2005-06-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>