宜しくお願いします。
色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。
サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。
1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。
配置はそれぞれ記載されている感じで、#A、#B、#Cというコンテナ内に入っているボタン画像にマウスが行くと、ボタン自体もマウスオーバーで変化し、かつ、#container内の赤い画像の場所にも別のsampleA.pngを表示させたいと考えています。
BとCに関しても同様で、それぞれ個別の位置に画像を表示させたいと思います。
ボタン側のマウスオーバーは出来たのですが、更に加えて離れた場所に画像を表示させる方法が分かりません。
<div id="container">ここに画像を表示させたいです!</div>
<div id="A"><a href="***"><img src="images/1.png" onmouseover="this.src='images/over1.png'" onmouseout="this.src='images/1.png'"></a></div>
<div id="B"><a href="***"><img src="images/2.png" onmouseover="this.src='images/over2.png'" onmouseout="this.src='images/2.png'"></a></div>
<div id="C"><a href="***"><img src="images/3.png" onmouseover="this.src='images/over3.png'" onmouseout="this.src='images/3.png'"></a></div>
どなたか、こういった方法でサイトを作成させた方いらっしゃいましたらアドバイスいただけますと助かります。
どうぞ、宜しくお願いいたします。m(_ _)m
No.1
- 回答日時:
一般的には、JavaScriptを用いてご要望の機能を実装すると思われますが、モダンブラウザのみの対応であれば、CSS3だけでも可能です。
質問者さんがどの程度の知識を持っていらっしゃるか不明ですが、もし、どちらも詳しくないということであれば、どこかで完成品を拾ってきてサイトに反映させるのが一番てっとりばやいです。ただし、その場合は、デザインを自由にできないことが多いです。有難うございます。
モダンブラウザを対象で良いと考えています。
もし何か具体的な自邸などあれば、ご紹介して頂けると幸いです。
jsはあまり詳しくありません。CSS3は微妙ですがある程度対応できます。
宜しくお願いいたします。
No.2
- 回答日時:
まず、HTMLをきちんと文書構造にしたがって書きましょう。
それさえできれば何とでもなります。とりあえず、HTMLはナビゲーションリストですから
<div class="nav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
というシンプルなのもで良いです。
あとはCSS2.1の範囲で十分可能です。
今から出かけるので・・残りは夕方にでも・・・
★HTMLは文書構造を記述するもの
これでjavascriptを理解しない検索エンジンやテキストブラウザその他オールマイティ
文書構造しか記述してないので、まったくデザインを変えることも自由自在
この基本さえできていれば、難しくはありません。
この回答への補足
有難う御座います。
>>というシンプルなのもで良いです。
>>あとはCSS2.1の範囲で十分可能です。
何と、HTML側はこの様なシンプルな定義で可能なのですか!?
>>今から出かけるので・・残りは夕方にでも・・・
有難う御座います。
この様な定義で実現できるのでしょうか、表示に興味が御座います。
どうぞ、引き続き宜しくお願いいたします。
No.3ベストアンサー
- 回答日時:
今日は忙しいので、ごく簡単に・・
★IE8以降対応ですが、IE7にも対応させるためには、あらかじめ表示画像をHTMLに記述しておいて、display:noneで隠して、:hoverでdisplay:blockにしてください。
★ボタンを画像にする場合は文字を画像に置き換える。背景にする場合はa:spanを、visibilty:hiddenで消す
★IE6は考慮していません。IE6は兄弟セレクタが使えないので、classセレクタで指定すること
HTML4.01strict+CSS2.1(ウェブ標準)です。HTML5にする場合はclass名をそのまま要素とすること。
<div class="header"> → <header>
class名やidは文書構造を補完する目的でつけましょう。HTMLがシンプルだとスタイルシートもわかりやすくなります。
div.section div.nav ul li a{}は、「本文(section)中のナビゲーションリストのa要素は・・・・」と読み解けるはず。いちいちHTMLと読み合わせをする必要はありません。HTMLを見なくてもスタイルシートが書いたり直したり出来る。
そしてなによりも、HTMLは文書構造しか記述してないので、どのようにもデザインしなおせます。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み。
CSSは、ご存知と言うことですので、説明は不要だと思います。
[注意]タブは_に置換してあります。戻してください。
<!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">
<!--
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{width:80%;margin:0 auto;}
p{line-height:1.6em;text-indent:1em;margin:0 1em;}
div.section div.nav{
width:420px;height:200px;
margin:0 auto 80px;
background-color:rgb(255,255,200);
position:relative;
}
div.section div.nav ul,div.section div.navul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;
}
div.section div.nav ul li{
_width:100px;
_height:40px;line-height:40px;
_position:absolute;
_left:10px;bottom:-50px;
_background-color:gray;
}
div.section div.nav ul li+li{left:160px;}
div.section div.nav ul li+li+li{left:300px;}
div.section div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;}
div.section div.nav ul li a:hover:after{
_content:url();
_position:absolute;
_left:0px;top:-190px;
_width:160px;height:120px;
_background-color:red;
}
div.section div.nav ul li+li a:hover:after{
_content:url();
_left:-50px;top:-90px;
_width:130px;height:60px;
_background-color:rgb(220,180,60);
}
div.section div.nav ul li+li+li a:hover:after{
_content:url();
_left:-50px;top:-190px;
_width:160px;height:160px;
_background-color:green;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>サンプル</h1>
_</div>
_<div class="section">
__<h2>本文</h2>
__<p>画像を表示したい部分と、ナビゲーションが別のブロックと言うことは文書構造上おかしいので、以下のサンプルでは同じブロックにマークアップしてあります。</p>
__<div class="nav">
___<ul>
____<li><a href="prodact1.html"><span>製品1</span></a></li>
____<li><a href="prodact2.html"><span>製品2</span></a></li>
____<li><a href="prodact3.html"><span>製品3</span></a></li>
___</ul>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
</html>
お忙しいところ有難う御座います!
教えて頂いたソースを元に試して見ましたところ、当方の意図する表示を行うことが出来ました。
本当に有難う御座います。m(_ _)mコードの記述など目から鱗でした!
途中画像の重なり順で悩みましたが、z-indexで解決できました。
すみません!1点だけ質問が御座います・・・。
現在、表示自体はきちんと出来ているのですが、
<li><a href="prodact1.html"><span>製品1</span></a></li>
↑などにマウスオーバーさせると<div class="nav">内に画像が表示されると同時に、何と言いましょうか・・・。画像が無いときなどに表示されるアイコン?と言えばよいのでしょうか?
そのアイコンのようなものが同時に表示されてしまいます。
しかしながら、2回目以降のマウスオーバーでは表示されませんが、またブラウザを更新すると最初の一回はそのアイコンが表示されてしまいます。
何度も申し訳ありません。
何かお心当たりなどありましたら宜しくお願いいたします。
No.4
- 回答日時:
>マウスオーバーさせると<div class="nav">内に画像が表示されると同時に、
これは、画像の読み込みが間に合ってないのです。画像のデータサイズを小さくすると解決すると思います。事前に画像を読み込ませておく方法もありますが必要ないでしょう。
HTMLをきちんと書きさえすれば、どのようにもデザインできる見本になると思います。数年後に見直してもなにが書かれているかわかるようにHTMLを書くこと。id="container"はまだしも(良くは無い--書くならarticle)、id="A"じゃわからなくなるでしょ。
class名は、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」が良い参考になるでしょう。
<!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">
<!--
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{width:80%;margin:0 auto;min-width:480px;max-width:800px;}
div.header{margin-top:40px;}
p{line-height:1.6em;text-indent:1em;margin:0 1em;}
div.nav ul,div.section div.navul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;
}
div.section div.nav{
width:420px;height:180px;
margin:0 auto 80px;
background-color:rgb(255,255,200);
position:relative;
}
div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;}
div.section div.nav ul li{
_width:100px;
_height:40px;line-height:40px;
_position:absolute;
_left:10px;bottom:-45px;
}
div.section div.nav ul li+li{left:160px;}
div.section div.nav ul li+li+li{left:300px;}
div.section div.nav ul li a:hover:after{
_content:url();
_position:absolute;
_left:0px;top:-170px;
_width:160px;height:120px;
_background-color:red;
}
div.section div.nav ul li+li a:hover:after{
_content:url();
_left:-50px;top:-70px;
_width:130px;height:60px;
_background-color:rgb(220,180,60);
}
div.section div.nav ul li+li+li a:hover:after{
_content:url();
_left:-50px;top:-170px;
_width:160px;height:160px;
_background-color:green;
}
/* リンクボタンの設定 */
div.section div.nav ul li a span{
visibility:hidden;
}
div.section div.nav ul li a:link{background-color:rgb(120,120,120);url();}
div.section div.nav ul li a:visited{background-color:rgb(40,40,40);url();}
div.section div.nav ul li a:hover,
div.section div.nav ul li a:focus{background-color:rgb(200,200,200);url();}
div.section div.nav ul li a:active{background-color:rgb(255,255,0);url();}
/* footer内のnav */
div.footer div.nav{position:absolute;top:0;left:0;width:100%;}
div.footer div.nav ul{width:80%;margin:0 auto;background-color:silver;min-width:480px;max-width:800px;}
div.footer div.nav ul li{width:32%;float:left;line-height:30px;position:relative;}
div.footer div.nav ul li a{border:outset 2px gray;background-color:red;}
div.footer div.nav ul li+li a{background-color:rgb(220,180,60);}
div.footer div.nav ul li+li+li a{background-color:green;}
div.footer div.nav ul li a:hover{border:outset 2px gray;background-color:orange;}
div.footer div.nav ul li+li a:hover{background-color:rgb(255,200,80);}
div.footer div.nav ul li+li+li a:hover{background-color:lime;}
div.footer div.nav ul li a:active{border-style:inset}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>サンプル</h1>
_</div>
_<div class="section">
__<h2>本文</h2>
__<p>いずれにしても、文書構造さえきちんとしていればHTML,CSSのメンテナンスが楽になります。下記サンプルではsection内のナビゲーションとfooter内のそれはまったく同じHTMLですが、プレゼンテーションは異なります。</p>
__<p>なお、リキッドデザインでデザインしてありますのでスマホでも、幅広ディスプレイでも・・・ウィンドウ巾に関わらず使えるはずです。</p>
__<div class="nav">
___<ul>
____<li><a href="prodact1.html"><span>製品1</span></a></li>
____<li><a href="prodact2.html"><span>製品2</span></a></li>
____<li><a href="prodact3.html"><span>製品3</span></a></li>
___</ul>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<div class="nav">
___<ul>
____<li><a href="prodact1.html"><span>製品1</span></a></li>
____<li><a href="prodact2.html"><span>製品2</span></a></li>
____<li><a href="prodact3.html"><span>製品3</span></a></li>
___</ul>
__</div>
_</div>
</body>
</html>
この回答への補足
すみません、補足させて頂きます。
先程、「ちなみに、この現象が確認出来るのはGoogle Chromeだけのようです。」と書かせて頂きましたが、もう1つ、Operaブラウザで確認すると、「画象」と表示されています。Google Chromeと同じ感じの小さな物が表示されております。
ソース内には「画象」というキーワードはありませんので、ブラウザ側で何かを画象と判断しているのでしょうか・・・。
再々申し訳ありません。
よろしくお願い致します。
有難うございます!m(_ _)m
これまた目から鱗の定義で楽しくなってしましました。w
HTML5のリンクも非常に参考になりました。全て覚えるのは少々時間がかかりそうですが、必要な箇所を極力意識して定義するように心がけてみます。
あと、何度も本当に申し訳無いのですが・・・。
>>これは、画像の読み込みが間に合ってないのです。画像のデータサイズを小さくすると
>>解決すると思います。事前に画像を読み込ませておく方法もありますが必要ないでしょう。
画象を小さくしてもダメでした。
また、今回お送り頂いたソースそのままでマウスオーバーしてみたのですが、それにも表示されています。
これは画象を使用されていないので、画象の影響では無いような気がいたします。
ちなみに、この現象が確認出来るのはGoogle Chromeだけのようです。
IEやFFでは表示されませんでした。
何故なのでしょうか・・・。
どうぞ、よろしくお願い致します。
No.5
- 回答日時:
画像の文字が表示されるのは
content:url();
と書かれているのに画像が実在しないからです。実際に画像を入れると表示されないです。
なお、
display:block;を追加したほうが良いでしょう。
div.section div.nav ul li a:hover:after{
content:url();
position:absolute;
left:0px;top:-170px;
width:160px;height:120px;
background-color:red;
}
一部間違いがありました。
[訂正前]
div.section div.nav ul li a:link{background-color:rgb(120,120,120);url();}
div.section div.nav ul li a:visited{background-color:rgb(40,40,40);url();}
div.section div.nav ul li a:hover,
div.section div.nav ul li a:focus{background-color:rgb(200,200,200);url();}
div.section div.nav ul li a:active{background-color:rgb(255,255,0);url();}
[訂正後]
div.section div.nav ul li a:link{background:rgb(120,120,120) url();}
div.section div.nav ul li a:visited{background:rgb(40,40,40) url();}
div.section div.nav ul li a:hover,
div.section div.nav ul li a:focus{background:rgb(200,200,200) url();}
div.section div.nav ul li a:active{background:rgb(255,255,0) url();}
何度も本当に有難う御座いました。
>>content:url();
>>と書かれているのに画像が実在しないからです。
本当です!こちらに画像を指定したら消えました。
ここが空のまま、background-image:url(***.jpg);でも動いていたので気が付きませんでした。
この場合は、content:url();とするのですね。
訂正のソースも有難う御座います。
今回お手数をお掛けしてしまいましたが、cssの記述では非常に勉強になりました。
記述方法などもっと沢山質問させて頂きたいのですが、そこまでは甘えられません。^^
他の部分の定義については、何とか自力で勉強・解決して行きたいと思います。
本当に、ここまでサポートして頂き心より感謝申し上げます。
有難う御座いました。m(_ _)m
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS のみのタブ切り替えについて
-
スクロール可能なチェックボックス
-
divのheight指定で画面一杯に表...
-
【CSS】floatで左右に並べた...
-
Ctrl+F(検索)の窓を出したいの...
-
スタイルシートで画面を上下に...
-
CSS <div>の入れ子が反映さ...
-
HTMLですCSSです この画像のよ...
-
MAX関数を使ってからLEFT JOIN...
-
jQueryで同じクラス名のものを...
-
createElementで作成した要素を...
-
jQueryでのドラッグアンドドロ...
-
[急ぎ] videoタグで埋め込んだm...
-
jqueryで要素の中身を要素の外...
-
jspでcssが読み込めない
-
eclipseでcssを使うためには?
-
htmlの記述で link rel=styles...
-
アコーディオン自動開閉メニュ...
-
SimplyScrollについて
-
JQuery UIで、表示したタブの中...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
HTMLですCSSです この画像のよ...
-
css固定したフッターが本文と重...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
チェックボックスの背景色って...
-
文字を固定したいのですが…
-
スタイルシートで画面を上下に...
-
フッターの下に隙間ができてしまう
-
文字をクリックしたら別の文字...
-
CSSでdivのheightを動的に
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
リキッドデザイン3カラム左端幅...
-
htmlのstyleのposition:relativ...
-
★★★フッター最下部固定/スクロ...
おすすめ情報