- ベストアンサー
マウスを乗せると違う場所に画像が出るには・・・？
よろしくお願いします。 最近、こちらのサイトを見て思ったのですが、http://www.joseishi.net/grazia/ このようにメニュー部分にマウスを乗せると、隣の違う部分に、写真が表示されるのですが、これはいったいどうやって行っているのでしょうか？ おしゃれな感じで私もやってみようかな？と思うのですが、方法がわかりません。私なりに調べて、ロール(マウス)オーバー？というものが近い感じがするのですが、その方法だとマウスが乗った部分の画像しか変えれないようなのです。 もし、このように少し遠くに写真などを表示させる方法をご存知の方は、アドバイスお願いいたします。
- apple_mango
- お礼率57% (131/229)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- CSSで画像を隠すとSEO的にNGですか？
通常時とマウスオーバー時の2枚の画像を使い、メニュー部分でCSSでロールオーバーを使っています。 この場合、マウスオーバー時に画像を読み込むため一瞬アイコンがちらつくようになるのを防ぐため、同じページにマウスオーバー時の画像を敷き詰め、display: noneで非表示にしています。 隠しテキストはSEO的にNGとわかりますが、隠し画像も同じ扱いなのでしょうか？ ちなみに隠している画像にはaltは付けていません。 個人サイトですが、できるだけSEOに問題ないようにしたいので、どうかご教示ください。 また2枚の画像を使ったCSSロールオーバーで、このチラつきを防ぐいい方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- 離れた場所にマウスオーバーで画像を変えたい。
宜しくお願いします。 色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。 サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。 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
- ベストアンサー
- CSS
- プルダウンメニューに画像を使いたい
画像（アイコン）にロールオーバーするとプルダウンメニューが表示される方法を探しています。全てテキス トで作る方法はいくつか分かったのですが、最初のボタン部分が画像でできているものが見つからず困っています。よろしくお願いします。
- 締切済み
- JavaScript
- 画像のオンオフ（表示／不表示）
メニューの部分で →トップ（マウスオーバー） 日記 写真 掲示板 ・矢印は画像でメニュー項目は文字 ・テーブルは組まないようにしたい ・矢印の画像は全項目共通 上記のようにメニューにマウスが乗った時に、画像の矢印を表示させ、マウスアウトで不表示にしたいです。矢印画像と空白画像の切り換えも考えたのですが、単純に表示/不表示の切り換えでできないかなと考えましたが、そのコードがうまく考え付きません。visibilityとか使うのかな？？う～ん？？ このサイトやGoogleで検索しましたが、（単純すぎるのか？）見つけることができませんでした。 できればシンプルなコードをご教授いただければと思います。よろしくお願い致します。
- ベストアンサー
- JavaScript
- yuga.jsを使うとロールオーバー画像が表示されない
お世話になっております。質問させてください。 現在メニューの画像をyuga.jsに入っていないスクリプトで ロールオーバーさせているのですが、 ある1ページにだけ yuga.js関係のスクリプトを使用した所、 そのページのメニュータイトル画像だけが 表示されなくなってしまいました。 （マウスを載せるとロールオーバー後の画像は出てくるのですが） http://www.geocities.jp/meguri_mizu/test/pc/2008.html ↑こんな感じです…。左上の「役に立つパソコン」の部分です。 firefoxだとずっとマウスオーバーした時の画像が表示されたままになってしまいます。 yuga.jsでできる、名前に_onをつけてのロールオーバーにしても やっぱり自ページのメニューだけがうまく表示されません。 なぜなのでしょうか…？ スクリプトが読めないのでどう直していいのか全然わかりません；； よろしければご教授ください。お願いします…。
- ベストアンサー
- JavaScript
- マウスオーバーで画像を拡大表示させたいです
http://www.videocopilot.net/tutorials/ 上記サイトのように、マウスオーバー画像をマウスオーバーするだけで マウスカーソルに追尾して画像やflvを表示させるには、どのようなプログラムを行えばよいのでしょうか？ または、ソフトの購入などが必要なのでしょうか？ ヒントまたは参考サイトなどございましたら、教えてください。 お願い致します。
- 締切済み
- JavaScript
- ロールオーバーで画像を固定
今、写真のアルバムのページを作っていて、 小さい画像の上にマウスを置くと、 小さい画像と、隣にある大きい画像が切り替わるようにロールオーバーの設定をしています。 そこで質問なのですが、マウスを置いた小さい画像をクリックしたら マウスが離れた後でも、大きい画像を 他の小さい画像をクリックするまで 固定しておくにはどのようにすればいいですか？
- ベストアンサー
- HTML
- グローバルナビゲーション(カレントページ・マウスオーバー)の作り方を教
グローバルナビゲーション(カレントページ・マウスオーバー)の作り方を教えてください。 個別ページ毎にactなどとクラスをいちいち割り振るのではなく、JavaScriptで、パッと一気に処理したいと考えています。 ネットを探し回って、「カレントページ」「マウスオーバー」それぞれに対応する記述は見つけたのですが、それらを組み合わせると期待通りの動作となりません。具体的には、カレントページで、グローバルメニューをマウスオーバーした際、マウスオーバー画像へ変わるまではよいのですが、マウスアウトした時点で、カレントではない、ノーマル画像へと変更されてしまいます。(リロードすると、カレントメニュー画像へと戻るのですが…) 「カレントページにいるときは、マウスオーバー画像を表示させずにカレントメニュー画像のままにしとく」 あるいは、 「カレントページでマウスアウトした際はカレントメニュー画像を、その他のページでマウスアウトした際はノーマルメニュー表示させる」ようにするためには、どうしたらよいでしょうか？ スクリプトそのものを教えていただけると一番有難いのですが、難しいようであれば、参考になるサイト等でも構いません。何らしかのヒントだけでも、誰かくださいー。
- ベストアンサー
- JavaScript
- マウスオーバーでポップアップ画像を出したい
サーチして沢山のサイトを見たのですが、どーーーーーーーしてもわからないので質問させてください。 サイトにある画像Aにマウスオーバーすると画像Bというのがポップアップで表示されるようにしたいのです。 どうやらjavascriptの方法とCSSの方法があるような感じなのですが、どーーーーーーーしてもわからないのです。。。 具体的にJavascriptでこう書いて入れてhtmlでこう書くんだよ、 とか CSSにこれを追加してhtmlにはこう書くんだよ とわかりやすく教えていただけると助かります。 どうぞよろしくお願いいたします。
- 締切済み
- HTML
- 画像の一部を変更したいのですが・・
画像の中に文字がありその文字のところにマウスを持っていくと 色が変わるようにしたいのです。 ロールオーバーのやり方はわかりますが、画像の中の一部だけを ロールオーバーで表示させるやり方がわかりません。
- 締切済み
- その他([技術者向] コンピューター)
お礼
BLUEPIXYさん有難うございます。 URLの方参考にさせていただきます。ちなみに一般的にこの技？は、なんという名前なのでしょうか？ 決まっているような名前がありましたら教えていただけないでしょうか？ よろしくお願いします。