• ベストアンサー

メニューにオンマウスすると、その下に複数の写真を表示したい

JavaScriptに関しての質問です。 グローバルナビゲーションの中に作品紹介のような項目を設けて、作品紹介にマウスを乗せると、そのメニューの右側に複数の作品画像の一覧が展開され、その中の作品画像をクリックすると詳細ページにジャンプするようにしたいと考えていますが、うまい方法が見つかりません。該当のエリアから外に出た時はその表示を消すようにしたいと考えています。 どなたか具体的な方法もしくは参考サイトなどをお教え頂けませんでしょうか? よろしくお願いします

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.3

こんにちは 下記のやつはNN未対応でしたね(><) http://www.openspc2.org/reibun/javascript/mouse/006/index.html NN対応であれば document.getElementById('onmenu').style.display="block" にしないとダメみたいです(NN6.0~) http://www.openspc2.org/reibun/javascript/mouse/063/index.html

JJ1981
質問者

お礼

苦労しましたが、お教え頂いた方法を利用してなんとか完成しました。ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは ほんの一例を紹介 <script language="javascript"> <!-- flag = false; function ch() { document.all['onmenu'].style.display = "block"; } function ch1() { document.all['onmenu'].style.display = "none"; } //--> </script> <table> <tr> <td valign="top"><A onmouseover="ch()">表示</a></td> <td> <div id="onmenu" style="display:none" onmouseover="ch()" onmouseout="ch1()"> <a href="test0.html">オンマウスで表示</a><br> <a href="test1.html">オンマウスで表示2</a> </td> </tr> </table>

JJ1981
質問者

お礼

ご回答ありがとうございます! なるほどこれを利用すればうまく行きそうです。 ただこれはネットスケープに対応していないのでしょうか? 当方の環境NN6で確認したところ表示できないようでした。

全文を見る
すると、全ての回答が全文表示されます。
noname#44015
noname#44015
回答No.1

onmouseover、onmouseoutを使うとできると思います。

参考URL:
http://www.scollabo.com/banban/jsindex/sample/sample_187.html
全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • メニューが隠れるのを防ぐ方法

    JavaScriptを使用してナビゲーションメニューや擬似プルダウンメニューを作成したのですが、 メニューが展開された先にHTMLのselectボックスがあると メニューがセレクトボックスの下に隠れるように表示されてしまい困っております。 メニューが隠れない方法はありますでしょうか?

  • HPでのメニューリスト表示

    HP作成をしていて、やりたい技術が出てきました。 良く会社のHPで見るのですが、右側(もしくは左側)に、HPのメニュー一覧が載っていて、そこの一つの項目の文字の上にマウスを重ねると さらにその下にあるメニューがリスト表示されるものです。 楽天ブックスHP http://books.rakuten.co.jp/RBOOKS/  のようなものです。 ソースを見てみると、どうもJavaScriptっぽく見えるのですが。 このようなものは、JavaScript、flush、どちらで表現できるのでしょうか? この2言語(?)は、全くの初心者なので、、分からないことだらけ出すみません。 JavaScriptは、見る側の環境が整っていないと見られないので、昔は避けるという風習があったようにも思えるのですが。 また、どちらが勉強しやすいなども教えてもらえればと思います。

  • FlashもしくはJavascriptを利用したナビゲーションメニュー

    ホームページの作成でトップページに FlashもしくはJavascriptを使用してインパクトのあるナビゲーションを設置を検討しています。 現在考えているナビゲーションのイメージとしては ・メインの画像エリアと複数のボタンで構成 ・各ボタンにマウスオーバーすると画像エリアの画像を切り替え ・各ボタンをクリックすると任意のリンク先へジャンプ といった形です。 いろいろと探してみましたが一番イメージが近いものは以下のURLで使用されているフラッシュです。 http://www.intheroom.jp/ ここはメインの画像エリアが自動的に切り替わったり、画像の切り替えにエフェクトがかかりますがここまでは必要ないです。(あると尚よいですが・・) 以下で配布されているスクリプトもイメージに近いです。 http://jqueryglobe.com/labs/feature_list/ ここはマウスオーバーで画像が切り替わらず、クリックしても別のURLには飛ばない点が残念です・・・。 もし私のイメージに近い形で配布されている素材をご存じでしたら教えていただけないでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • Flash
  • ドロップダウンメニューに関する質問。超初心者です。

    ドロップダウンメニュー(親メニューだけgif画像で子メニューはcssで表示)を作りたいと思っています。 javascript又はCSS+htmlを使ってドロップダウンメニューを作りたいと良いサンプルを探しております。 親メニューは画像で、子メニューはcssで表示させたいと思います。 サイドメニューとして、縦並びに配置して、オンマウスで右側に子メニューのリストが展開するように。 ネット上でサンプルを探しているのですが、全部cssで展開だったり、全部画像で展開だったりして、 親メニューだけ画像で、子メニューはcssで表示というのがなかなかみつかりません。。 超超初心者の私にどなたかご教授願えないでしょうか。 よろしくお願い致します。m(_ _)m  

  • オンマウスでの画像表示の位置指定について

    以前、ここでオンマウスをしたときだけサムネイル画像を表示する方法を教えていただき大変助かりました。 ついては、その関連ですが、現在リスト(たて30行くらい、横10列くらい)の各行にマウスをおくことで各行の右側にサムネイルが表示されます。(行とは下記ソースの「○○○○(04.9.18)」にあたります。) ところが右端の列は、画面ぎりぎりのためこの列だけ行の左側にサムネイルを表示させたいのです。 教えていただいたソースは <script type="text/javascript"> function over( img,area ) { var e = document.getElementById( area ); e.innerHTML = '<img src="'+img+'">'; e.style.position = "absolute"; e.style.border = "solid #c0c0c0"; return area; } function out(area) { var e = document.getElementById( area ); e.innerHTML = ''; e.style.border = "none"; } </script> (表示部分) <A href="index.htm#040918" target=_top onmouseover="area=over('test/img/IMGP4995_thumb.jpg','area002');" onmouseout="out(area);">○○○○(04.9.18)</A><span id="area002"></span> 以下idを変えて繰り返し お教えいただけるとありがたいです。 (当方javascriptの知識はありません) よろしくお願いします。

  • Excelのメニュー表示を右側にしたいのですが

    Excel 2010を使用中ですが、突然マウスの右クリックで表示されるメニューがマウスポインターの左側に表示されるようになってしまいました。従前のように、メニューがマウスポインターの右側に表示されるようにしたいのですが、どなたかその方法を教えてください。よろしくお願い致します。

  • 下記のようなメニューを作成しようと思い、質問したところJavaScri

    下記のようなメニューを作成しようと思い、質問したところJavaScriptでの方法を教わり 作成したのですが、解決してから、右側の4つのボタンメニューに2pxぐらいの隙間が できてしまい、いろいろCSSで調整してみたのですが、どうしても解決できなく再度質問しました。 ※http://okwave.jp/qa/q5843544.htmlで質問と回答を得る http://www.nittsu.co.jp/index.html のサイトのグローバルメニュー下のFlashコンテンツ。 やりたかったことは、 同じように右側に4つのボタンを縦に配置して、マウスオーバーをすると左側のイメージが変更されるようにしたい。 教えてもらった方法は、http://www.red.oit-net.jp/tatsuya/java/image3.htm のサンプルデータと同様な方法で行いました。 また、さらに右側のボタンをマウスオーバーで同時に画像も変更できるとさらに良いです。 よろしくお願いいたします。

  • JavaScript 折りたたみ式のメニュー

    こんにちは。 Javascriptのメニューなのですが おおまかなイメージとしては↓のサイトのような感じですhttp://www.pat.hi-ho.ne.jp/oka_tosho/tree17/tree17.htm ※スクロールについてくる動きは必要ないです ・縦方向にメニューの大項目があって ・マウスオーバーによって小項目が出てくる ・小項目は大項目の横にではなく、下に出る 上記のような動きをつけたいのですが 縦にメニューが展開されていくタイプだと クリックで動くものしか発見できず マウスオーバーで動くタイプは、大項目の 右側に小項目が出てきて、大項目自体は動かない ものしか発見できませんでした。 この動きが出来るのかどうかもわからないんですが サンプルサイトなどご存知の方がいらっしゃったら 教えていただきたいのですが。 それと、こうゆう動きをするメニューの名前は何になりますか? ネットでスクリプトのサンプルを探そうと思っんですが私が名前をよくわかっていなくてうまく検索できませんでした。 私の中では折りたたみ式のメニューと思っていたのですが、他の一般的な呼び名を教えていただけますか?

  • オンマウスの効果

    flashを勉強しはじめて約2ヶ月のものです。 使用ソフトはflashMX2004です。 メニュー部分のオンマウスの効果についてご相談です。 シンボルボタン内のオーバー部分にアニメーションを付けてナビゲーションを創ったのですが、 http://www.templatemonster.jp/show.php?templ=5344 ↑こちらの参考のように、パキパキとマウスが離れると元に戻る普通の状態です。 今回悩んでいるのは、以下の参考サイト内の左上のナビゲーションのように上から下、下から上にマウスをなぞると、パラパララーと滑らかな動きをプラスさせたいのです。 http://www.templatemonster.jp/show.php?templ=6388 シンボルボタンとアニメーションだけでは創れないのでしょうか・・・? アニメーションの長さを長くしたりしてみたのですが、やはりマウスが離れると欲しい効果にはならないのです。 壁に当たり困ってしまいました・・・。 どなたか、作成方法を教えて頂けますと幸いです。 どうぞよろしくお願い致します。

    • ベストアンサー
    • Flash
  • メニューが正しく表示されなくなりました

    Windows Vista Home Premium SP2 を使用しています。 先日IE7から誤ってIE8をインストールしてしまい、直ちにアンインストールをして 7に戻したのですが、それ以来、メニューバーおよびコンテキストメニュー(マウス 右ボタン)が正しく表示されなくなりました。 マウスクリックした時点では、底辺と右辺に影のみが表示されるだけで、内容が 表示されません。(画像参照) その後、カーソルを見えていないメニュー内に移動させるとカーソルの通過した エリアまでのメニューが表示されていきます。 IE8をアンインストールする以前は、正常に表示されており、現象が発生した前後 にソフトウエア等のインストール、アンインストールはIE以外心当たりがありません。 正しく表示させるためにはどうすればいいでしょうか? 解決策をご教授ください。