離れた場所にマウスオーバーで画像を変えたい。

Question

宜しくお願いします。色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。 1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。配置はそれぞれ記載されている感じで、#A、#B、#Cというコンテナ内に入っているボタン画像にマウスが行くと、ボタン自体もマウスオーバーで変化し、かつ、#container内の赤い画像の場所にも別のsampleA.pngを表示させたいと考えています。 BとCに関しても同様で、それぞれ個別の位置に画像を表示させたいと思います。ボタン側のマウスオーバーは出来たのですが、更に加えて離れた場所に画像を表示させる方法が分かりません。

ここに画像を表示させたいです！

どなたか、こういった方法でサイトを作成させた方いらっしゃいましたらアドバイスいただけますと助かります。どうぞ、宜しくお願いいたします。m(_ _)m

ORUKA1951 · Accepted Answer

今日は忙しいので、ごく簡単に・・ ★IE8以降対応ですが、IE7にも対応させるためには、あらかじめ表示画像をHTMLに記述しておいて、display:noneで隠して、:hoverでdisplay:blockにしてください。 ★ボタンを画像にする場合は文字を画像に置き換える。背景にする場合はa:spanを、visibilty:hiddenで消す ★IE6は考慮していません。IE6は兄弟セレクタが使えないので、classセレクタで指定すること HTML4.01strict+CSS2.1(ウェブ標準)です。HTML5にする場合はclass名をそのまま要素とすること。

　→　

　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.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。　CSSは、ご存知と言うことですので、説明は不要だと思います。 [注意]タブは＿に置換してあります。戻してください。＿＿サンプル＿＿＿＿＿＿＿

＿＿

本文

＿＿

画像を表示したい部分と、ナビゲーションが別のブロックと言うことは文書構造上おかしいので、以下のサンプルでは同じブロックにマークアップしてあります。

＿＿

＿＿＿

製品1
製品2
製品3

＿＿

＿

ORUKA1951 · Answer

画像の文字が表示されるのは
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();}

ORUKA1951 · Answer

＞マウスオーバーさせると

内に画像が表示されると同時に、　これは、画像の読み込みが間に合ってないのです。画像のデータサイズを小さくすると解決すると思います。事前に画像を読み込ませておく方法もありますが必要ないでしょう。　HTMLをきちんと書きさえすれば、どのようにもデザインできる見本になると思います。数年後に見直してもなにが書かれているかわかるようにHTMLを書くこと。id="container"はまだしも(良くは無い--書くならarticle)、id="A"じゃわからなくなるでしょ。　class名は、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」が良い参考になるでしょう。＿＿サンプル＿＿＿＿＿＿＿

＿＿

本文

＿＿

いずれにしても、文書構造さえきちんとしていればHTML,CSSのメンテナンスが楽になります。下記サンプルではsection内のナビゲーションとfooter内のそれはまったく同じHTMLですが、プレゼンテーションは異なります。

＿＿

なお、リキッドデザインでデザインしてありますのでスマホでも、幅広ディスプレイでも・・・ウィンドウ巾に関わらず使えるはずです。

＿＿

＿＿＿

製品1
製品2
製品3

＿＿

＿

ORUKA1951 · Answer

まず、HTMLをきちんと文書構造にしたがって書きましょう。それさえできれば何とでもなります。とりあえず、HTMLはナビゲーションリストですから

というシンプルなのもで良いです。　あとはCSS2.1の範囲で十分可能です。　今から出かけるので・・残りは夕方にでも・・・ ★HTMLは文書構造を記述するもの　これでjavascriptを理解しない検索エンジンやテキストブラウザその他オールマイティ　文書構造しか記述してないので、まったくデザインを変えることも自由自在　　この基本さえできていれば、難しくはありません。

tracer · Answer

一般的には、JavaScriptを用いてご要望の機能を実装すると思われますが、モダンブラウザのみの対応であれば、CSS3だけでも可能です。質問者さんがどの程度の知識を持っていらっしゃるか不明ですが、もし、どちらも詳しくないということであれば、どこかで完成品を拾ってきてサイトに反映させるのが一番てっとりばやいです。ただし、その場合は、デザインを自由にできないことが多いです。

離れた場所にマウスオーバーで画像を変えたい。

今日は忙しいので、ごく簡単に・・

画像の文字が表示されるのは

＞マウスオーバーさせると<div class="nav">内に画像が表示されると同時に、

この回答への補足

まず、HTMLをきちんと文書構造にしたがって書きましょう。

この回答への補足

一般的には、JavaScriptを用いてご要望の機能を実装すると思われますが、モダンブラウザのみの対応であれば、CSS3だけでも可能です。

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング