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

2023/08/16 00:38

このQ&Aのポイント

ボタン自体をマウスオーバーで変化させ、選択している時に別の場所に画像を表示したい
3つの異なる場所へ画像を表示させる方法が分からない
ボタンのマウスオーバーはできるが、画像を表示させる方法が分からない

ベストアンサー

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

2012/03/15 21:04

宜しくお願いします。色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。 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

oneday77
お礼率56% (91/162)

CSS
回答数5
ありがとう数4

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/03/16 12:29 回答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.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。　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">  ＿</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>

質問者

お礼 2012/03/16 17:15

お忙しいところ有難う御座います！教えて頂いたソースを元に試して見ましたところ、当方の意図する表示を行うことが出来ました。本当に有難う御座います。m(_ _)mコードの記述など目から鱗でした！途中画像の重なり順で悩みましたが、z-indexで解決できました。すみません！1点だけ質問が御座います・・・。現在、表示自体はきちんと出来ているのですが、 <li><a href="prodact1.html"><span>製品1</span></a></li> ↑などにマウスオーバーさせると<div class="nav">内に画像が表示されると同時に、何と言いましょうか・・・。画像が無いときなどに表示されるアイコン？と言えばよいのでしょうか？そのアイコンのようなものが同時に表示されてしまいます。しかしながら、2回目以降のマウスオーバーでは表示されませんが、またブラウザを更新すると最初の一回はそのアイコンが表示されてしまいます。何度も申し訳ありません。何かお心当たりなどありましたら宜しくお願いいたします。

その他の回答 (4)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/03/17 06:50 回答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();} 　

質問者

お礼 2012/03/17 12:48

何度も本当に有難う御座いました。 >>content:url(); >>と書かれているのに画像が実在しないからです。本当です！こちらに画像を指定したら消えました。ここが空のまま、background-image:url(***.jpg);でも動いていたので気が付きませんでした。この場合は、content:url();とするのですね。訂正のソースも有難う御座います。今回お手数をお掛けしてしまいましたが、cssの記述では非常に勉強になりました。記述方法などもっと沢山質問させて頂きたいのですが、そこまでは甘えられません。^^ 他の部分の定義については、何とか自力で勉強・解決して行きたいと思います。本当に、ここまでサポートして頂き心より感謝申し上げます。有難う御座いました。m(_ _)m

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/03/16 18:18 回答No.4

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

質問者

お礼 2012/03/17 00:22

有難うございます！m(_ _)m これまた目から鱗の定義で楽しくなってしましました。ｗ HTML5のリンクも非常に参考になりました。全て覚えるのは少々時間がかかりそうですが、必要な箇所を極力意識して定義するように心がけてみます。あと、何度も本当に申し訳無いのですが・・・。 >>これは、画像の読み込みが間に合ってないのです。画像のデータサイズを小さくすると >>解決すると思います。事前に画像を読み込ませておく方法もありますが必要ないでしょう。画象を小さくしてもダメでした。また、今回お送り頂いたソースそのままでマウスオーバーしてみたのですが、それにも表示されています。これは画象を使用されていないので、画象の影響では無いような気がいたします。ちなみに、この現象が確認出来るのはGoogle Chromeだけのようです。 IEやFFでは表示されませんでした。何故なのでしょうか・・・。どうぞ、よろしくお願い致します。

質問者

補足 2012/03/17 00:37

すみません、補足させて頂きます。先程、「ちなみに、この現象が確認出来るのはGoogle Chromeだけのようです。」と書かせて頂きましたが、もう１つ、Operaブラウザで確認すると、「画象」と表示されています。Google Chromeと同じ感じの小さな物が表示されております。ソース内には「画象」というキーワードはありませんので、ブラウザ側で何かを画象と判断しているのでしょうか・・・。再々申し訳ありません。よろしくお願い致します。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/03/16 08:26 回答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を理解しない検索エンジンやテキストブラウザその他オールマイティ　文書構造しか記述してないので、まったくデザインを変えることも自由自在　　この基本さえできていれば、難しくはありません。

質問者

補足 2012/03/16 12:26

有難う御座います。 >>というシンプルなのもで良いです。 >>あとはCSS2.1の範囲で十分可能です。何と、HTML側はこの様なシンプルな定義で可能なのですか！？ >>今から出かけるので・・残りは夕方にでも・・・有難う御座います。この様な定義で実現できるのでしょうか、表示に興味が御座います。どうぞ、引き続き宜しくお願いいたします。

tracer
ベストアンサー率41% (255/621)

2012/03/16 01:53 回答No.1

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

質問者

お礼 2012/03/16 02:08

有難うございます。モダンブラウザを対象で良いと考えています。もし何か具体的な自邸などあれば、ご紹介して頂けると幸いです。 jsはあまり詳しくありません。CSS3は微妙ですがある程度対応できます。宜しくお願いいたします。

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

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