- ベストアンサー
画像のオンオフ（表示／不表示）
メニューの部分で →トップ（マウスオーバー） 日記 写真 掲示板 ・矢印は画像でメニュー項目は文字 ・テーブルは組まないようにしたい ・矢印の画像は全項目共通 上記のようにメニューにマウスが乗った時に、画像の矢印を表示させ、マウスアウトで不表示にしたいです。矢印画像と空白画像の切り換えも考えたのですが、単純に表示/不表示の切り換えでできないかなと考えましたが、そのコードがうまく考え付きません。visibilityとか使うのかな？？う～ん？？ このサイトやGoogleで検索しましたが、（単純すぎるのか？）見つけることができませんでした。 できればシンプルなコードをご教授いただければと思います。よろしくお願い致します。
- jamslot
- お礼率71% (338/471)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#2の手法ではNetscapeなどで動作しないので(その代わりIE4では動作しません)。 ---------------------------------- HTML <ul id="menu"> <li><a href="*****" onmouseover="visArrow(this, 1)" onmouseout="visArrow(this, 0)"><img src="*******.gif" alt="">トップ</a></li> <li><a href="*****" onmouseover="visArrow(this, 1)" onmouseout="visArrow(this, 0)"><img src="*******.gif" alt="">日記</a></li> <li><a href="*****" onmouseover="visArrow(this, 1)" onmouseout="visArrow(this, 0)"><img src="*******.gif" alt="">写真</a></li> <li><a href="*****" onmouseover="visArrow(this, 1)" onmouseout="visArrow(this, 0)"><img src="*******.gif" alt="">掲示板</a></li> </ul> ---------------------------------- JavaScript function visArrow(obj, n){ if (document.getElementById) { obj.childNodes[0].style.visibility = n ? "visible" : "hidden"; } } ---------------------------------- CSS #menu { margin-left: 0; padding-left: 0; } #menu img { visibility: hidden; } ---------------------------------- もし、個別のIDを付けるのが特に面倒でなく、IE4に対応させるなら <ul id="menu"> <li><a href="*****" onmouseover="visArrow(0, 1)" onmouseout="visArrow(0, 0)"><img src="*******.gif" alt="" id="menu0">トップ</a></li> <li><a href="*****" onmouseover="visArrow(1, 1)" onmouseout="visArrow(1, 0)"><img src="*******.gif" alt="" id="menu1">日記</a></li> <li><a href="*****" onmouseover="visArrow(2, 1)" onmouseout="visArrow(2, 0)"><img src="*******.gif" alt="" id="menu2">写真</a></li> <li><a href="*****" onmouseover="visArrow(3, 1)" onmouseout="visArrow(3, 0)"><img src="*******.gif" alt="" id="menu3">掲示板</a></li> </ul> ---------------------------------- JavaScript function visArrow(objNum, n){ if (document.all) { document.all("menu" + objNum).style.visibility = n ? "visible" : "hidden"; } else if (document.getElementById) { document.getElementById("menu" + objNum).style.visibility = n ? "visible" : "hidden"; } } ---------------------------------- CSS #menu { margin-left: 0; padding-left: 0; } #menu img { visibility: hidden; } -----------------------
その他の回答 (3)
- koutarou504
- ベストアンサー率44% (182/407)
ちょっと補足の様な物で・・・。 一応 CSS は閲覧者側の環境で動きますから、 ＃１, ＃２の方々の提案では CSS が無効の場合は全てに矢印が表示されますので、 それは意識する必要があると思います。 回避策は、初期表示を全面透過の画像か 背景色と全面同じ画像を表示させ、 マウスが乗った時に矢印の画像に置き換える。 仕掛けは style属性を更新するか src属性を更新するかの違いだけ。 まぁそこまでの配慮が必要かは不明ですが、 CSS を無効にする事が容易に出来るのは確かです。
お礼
ご回答有り難うございました。 ＞CSS を無効にする事が容易に出来るのは確かです。 そうなんですね！勉強になりました
- taseki
- ベストアンサー率66% (155/233)
cobolerさんと同じような仕組みですが、idが複数だと配列になるのを利用して… -------------------- <html> <body> <a href="diary.html" onMouseover="this.all.arrow.style.visibility='visible'" onMouseout="this.all.arrow.style.visibility = 'hidden'"> <img id="arrow" src="arrow.gif" width="20" height="10" style="visibility:hidden;border-style:none;">日記</a><br> <a href="photos.html" onMouseover="this.all.arrow.style.visibility='visible'" onMouseout="this.all.arrow.style.visibility = 'hidden'"> <img id="arrow" src="arrow.gif" width="20" height="10" style="visibility:hidden;border-style:none;">写真</a><br> <a href="bbs.html" onMouseover="this.all.arrow.style.visibility='visible'" onMouseout="this.all.arrow.style.visibility = 'hidden'"> <img id="arrow" src="arrow.gif" width="20" height="10" style="visibility:hidden;border-style:none;">掲示板</a><br> </body> </html>
お礼
ご回答有り難うございました。 ＃４の方のコードですすめる予定です。
- coboler
- ベストアンサー率57% (57/99)
<img src="mark.gif" id="mark" style="visibility:hidden";> <font onMouseover="mark.style.visibility = 'visible'"; onMouseout="mark.style.visibility = 'hidden'">メニュー文字</font> 上記コードの"mark.gif"を矢印画像にすればいけると思います。 imgタグのidをそれぞれのメニュー項目で変えて使って下さい。
お礼
ご回答有り難うございました。 ＃4の方のコードですすめていく予定です。
関連するQ&A
- マウスオーバーで複数の画像を表示したいです。
マウスオーバーで複数の画像を表示したいです。 マウスオーバーで複数の画像を任意の場所に表示して、 マウスアウトでそれぞれの画像を非表示にしたいです。 やりたい事は ■にマウスオーバーすると□が表示され、□をどれかマウスオーバーしても、□の画像３枚全部とも表示は続いてほしいです。■と□のどれかからマウスアウトすると非表示にしたいのです。 ■ □ □ □ よろしくお願いします。
- ベストアンサー
- JavaScript
- jquryを利用した画像切り替え
jqury(1.3)を利用しマウスオーバー,アウトで画像切り替えを行おうとしています。 マウスオーバーで特定の箇所に画像入れ替えする事はできたのですがマウスアウトで最初の画像に 戻すにはどうすればいいのでしょうか？具体的には・・・ <div><img id="target" src="最初の画像" /></div> <div class="thumbnail"> //以下の画像はマウスオーバーでtargetに拡大表示、マウスアウトで拡大画像を消し最初の画像に戻したい <a href="1の拡大"><img src="1の縮小" /></a> <a href="2の拡大"><img src="2の縮小" /></a> <a href="3の拡大"><img src="3の縮小" /></a> </div> という具合です。jsは以下のようにしたところマウスオーバーで切り替えは可能になったのですが戻すことができない状態です。 .hover( function(){// マウスオーバー時 $(this).fadeTo(200, 1.0); var changeSrc = $(this).attr("href"); $("#target").attr("src", changeSrc); }, function(){// マウスアウト時 $(this).fadeTo(500, 0.8); //ここで戻す処理をすると思うのですが方法がわかりません } ) 詳しい方がいらっしゃいましたら宜しくお願い致します。
- 締切済み
- JavaScript
- グローバルナビゲーション(カレントページ・マウスオーバー)の作り方を教
グローバルナビゲーション(カレントページ・マウスオーバー)の作り方を教えてください。 個別ページ毎にactなどとクラスをいちいち割り振るのではなく、JavaScriptで、パッと一気に処理したいと考えています。 ネットを探し回って、「カレントページ」「マウスオーバー」それぞれに対応する記述は見つけたのですが、それらを組み合わせると期待通りの動作となりません。具体的には、カレントページで、グローバルメニューをマウスオーバーした際、マウスオーバー画像へ変わるまではよいのですが、マウスアウトした時点で、カレントではない、ノーマル画像へと変更されてしまいます。(リロードすると、カレントメニュー画像へと戻るのですが…) 「カレントページにいるときは、マウスオーバー画像を表示させずにカレントメニュー画像のままにしとく」 あるいは、 「カレントページでマウスアウトした際はカレントメニュー画像を、その他のページでマウスアウトした際はノーマルメニュー表示させる」ようにするためには、どうしたらよいでしょうか？ スクリプトそのものを教えていただけると一番有難いのですが、難しいようであれば、参考になるサイト等でも構いません。何らしかのヒントだけでも、誰かくださいー。
- ベストアンサー
- JavaScript
- USEMAPでの指定区域にマウスオーバー→画像popup、クリックで別窓映像表示させる記述
USEMAPでエリア指定した（画像の）一部にマウスオーバーした時に、補足説明画像をポップアップさせる方法はありますでしょうか？ 従来はCSSの処理で、一つの画像にマウスオーバーした時に下記【１】の手順で別の説明用画像をポップアップ表示する処理が出来ているのですが、（通常はhidden,マウスオーバーでvisible） 今回【２】のようなUSEMAPで指定した（大きな画像の）一部のEREA指定部にマウスがオーバーした時点でポップアップ出来れば良いなあ…と、質問させていただきました。 教えていただければうれしいです。よろしくお願いします。<(_ _)> ちなみに、USEMAPを使う理由ですが、当該画像エリア部をクリックすると対応したビデオ映像が別窓で表示されるようにしています。 この動作は必要ですのでご配慮ください。 なお、ALT属性は画像が使えません。 よろしくお願いします。 ------------------------------------------------------- 【１】 <HEAD> .popup01 A { POSITION: relative } .popup01 A IMG.message { LEFT: -50px; VISIBILITY: hidden; WIDTH: 250px; POSITION: absolute; TOP: -50px; HEIGHT: 42px } .popup01 A:hover { VISIBILITY: visible } .popup01 A:hover IMG.message { VISIBILITY: visible } </HEAD> <BODY> <A href="001.jpg" ALT="*" BORDER="0"><IMG class=message src="popup001.gif" border=0></A> </BODY> ------------------------------------------------------- 【２】 <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function sub_open_movie01(){ window.open("./movie-con01.html",""," width=600,height=550,left=50,top=50,menubar=yes,scrollbars=yes"); } //--> </HEAD> <BODY> <img src="002.jpg" USEMAP="#UserMapName"> <MAP NAME="UserMapName"> <AREA SHAPE="RECT" COORDS="10,10,50,50" HREF="javascript:sub_open_movie01();"> </MAP> </BODY> ------------------------------------------------------- 記述はCSS,Javascript等いずれでも結構ですので、マウスオーバーでポップアップ→マウスアウトで消え、クリックで別窓映像表示してくれればうれしいです。 単一の画像に対して（マウスオーバー・アウト）の記述はネットで検索するとたくさん教えてもらえるのですが、USEMAP中での処理に関して（マウスオーバー・アウトとクリックで）各々別の動作（画像表示ON,OFFと別窓表示window.open）をするような解説は見つけられませんでした。 よろしくお願いします！<(_ _)>
- ベストアンサー
- JavaScript
- マウスオーバーの合体
マウスオーバーのプルダウンメニューと マウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？ イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、 更に画像Ｂの下にプルダウンメニューが表示されるイメージです。 尚、現在は以下の組み合わせがうまくいかない為（不可能？） 個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <img src="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑
- 締切済み
- JavaScript
- yuga.jsを使うとロールオーバー画像が表示されない
お世話になっております。質問させてください。 現在メニューの画像をyuga.jsに入っていないスクリプトで ロールオーバーさせているのですが、 ある1ページにだけ yuga.js関係のスクリプトを使用した所、 そのページのメニュータイトル画像だけが 表示されなくなってしまいました。 （マウスを載せるとロールオーバー後の画像は出てくるのですが） http://www.geocities.jp/meguri_mizu/test/pc/2008.html ↑こんな感じです…。左上の「役に立つパソコン」の部分です。 firefoxだとずっとマウスオーバーした時の画像が表示されたままになってしまいます。 yuga.jsでできる、名前に_onをつけてのロールオーバーにしても やっぱり自ページのメニューだけがうまく表示されません。 なぜなのでしょうか…？ スクリプトが読めないのでどう直していいのか全然わかりません；； よろしければご教授ください。お願いします…。
- ベストアンサー
- JavaScript
- 1枚の画像でナビゲーション＋ドロップダウンの設定
上記の通りになるのですが、 1枚の画像だけを用意して、ナビゲーションメニュー＋一部のメニューには プルダウンも設定したいのです。 例を言えば MENU1、MENU2、MENU3、MENU4という項目があり、 MENU1とMENU2は単純にマウスオーバーをした際に色が変わるという設定をし、 MENU3とMENU4にはマウスオーバーをした際にその下にそれぞれMENU3_1、MENU3_2、MENU4_1、MENU4_2 というメニュー階層を縦表示でつけられればと思っています（これにもマウスオンマウスオフ、アクティブ時で色変えしたい）。 単純にマウスオーバー時に変わる設定ならば CSSのhover設定とactive設定でいけるかと思っているのですが、 項目中2つだけドロップダウンを入れるとなるとペライチでどのように設定すれば いいのか……と悩んでおります。 また、もし普通のメニューは1枚画像で用意して、 ドロップダウンメニューの部分は別画像を用意して設定する、 というの方が簡単であるならばそちらの手法もご指摘いただければと思います。 サンプルとしてペライチで作成する場合の「こういう風の画像を用意して設定できればな」 という画像を添付させていただきます。（サンプルなので簡略に作成しております） 手法は特に指定しておりません。 分かりにくい説明で大変申し訳ございませんが、ご教授いただけますと幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- CSS
- 画像にマウスを重ねると大きな画像を表示したい
illustratorでスライスを作製し、画像を生成しました。 1000×1076のサイズで32個の画像で構成されるスライスになっています。 そのスライスの一部の画像にマウスオーバーするとスライス全体の 1000×1076と同じサイズの背景透明画像を上に表示したいのです。 よくあるボタンのマウスオーバーなどでやると元画像のまわりに画像がある想定ではないためか、マウスオーバーするとスライスが崩れてしまいます。 本来Flashなどでやるようなことと思いますが、 iPadでも見たいためCSSやJavascriptで実現したいと思います。 よろしくお願い致します。
- 締切済み
- CSS
- 画像が表示されません
こんばんは！ いつもお世話になっています。 メモライズという画像もアップできる日記サイト（携帯からも更新できる）で日記を書いているのですが、今までちゃんと表示されていたはずの画像（jpg）が、ここ２，３日、表示されなくなっています（画像サイズの白い空白の左に赤い×がついている、おなじみのやつが表示されています）。 しかも、昨日まで表示されていた画像を今日見たら、表示されなくなっていました。 メモライズのせいかと思い、メールで何度か問い合わせをしてみましたが、どこも異常がないとのこと。 友人に日記をみてもらったのですが、友人のパソコンにはちゃんと表示されているようです。 他のサイトの画像はちゃんと表示されるのですが、これは私のパソコンがおかしくなっているのでしょうか？ どうやったら元も戻すことが出来るのでしょうか…(T_T) リロードしてみたり履歴やクッキーを消してみたりしたのですが、一向に改善せずです。 ちなみに、携帯からの更新は、画像も文章も全く反映されていません。 サーバーに届いていないのかとも思うのですが、私の携帯には送信済みとなっているんです(T_T) すごく困ってます～。ぜひアドバイスおねがいします。
- 締切済み
- Windows XP
- 画像表示のようなきれいなプルダウン
例えばマイクロソフトのサイト（http://www.microsoft.com/japan/）のトップメニューにあるように、マウスオーバで、画像で作ったようなきれいなプルダウンが開くのは、どうのように行っているのでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
お礼
ご回答有り難うございました。 とても丁寧なコードを書いて頂いて感謝しております。IE4に対応したコードを参考にさせて頂こうと思います。