• 締切済み

オンマウスでリスト表示させてリンクしたい

お世話に成ります 以前にドロップダウンリストからリンクする 上記の回答例を変更してやってみましたがうまくいきません <SCRIPT LANGUAGE="JavaScript"> <!-- function Mylink(Sel){ mlink=Sel.options[Sel.selectedIndex].value; if(mlink!="-"){ window.open(mlink,"","toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes"); } } //--> </SCRIPT> <FORM method="post"> <select onChange="Mylink(this)"> **下記はボタン形式で表示させたい <OPTION selected value="-">　　　　　★　私の自慢　★</OPTION> **上記 ★　私の自慢　★ に オンマウスしたら 下記のリストを表示させ クリックで同じページにリンクさせたい <OPTION value="-">------------------------</OPTION> <OPTION value="java_sakama.html">自慢の魚</OPTION> <OPTION value="java_kotori.html">自慢の小鳥</OPTION> <OPTION value="-">------------------------</OPTION> </select> </FORM> どうぞよろしくご回答下さい

みんなの回答

noname#56882
noname#56882
回答No.2

#1です。解釈を間違っていまして申し訳ありませんでした。 リンク先を拝見しましたところ、CSSも使用しているようです。 JavaScriptとCSSとの併用でしたら同様にできることを紹介しているサイトがありました。 「falog | CSS(とJS)でシンプルなドロップダウンメニュ」 http://blog.faro.main.jp/?eid=369489 「JavaScript + Ajax　ドロップダウンメニュー」 http://jsajax.com/DropDownMenuArticle286.aspx

noname#56882
noname#56882
回答No.1

下記のようなものをお求めなのでしょうか？ 「ドロップダウンメニューを連結させる」 http://www.mdn.co.jp/webcre/Tips/Vol34/s5/5.html そうでしたらこちらのソースを参考になさってみてはどうでしょう。

alisa143
質問者

補足

回答ありがとうございます 私が行いたいのは、下記のHPの上部に有る リンク表示方法をJavaScriptでしたいと考えています http://toyota.jp/information/index.html

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • ＨＴＭＬ　ドロップダウンメニューのリンク先

    <SCRIPT LANGUAGE="JavaScript"> <!-- function Mylink(sel){ mlink=sel.options[sel.selectedIndex].value; if(mlink!="-"){ location.href=mlink; } } //--> </SCRIPT> <FORM method="post"> <select onChange="Mylink(this)"> <OPTION selected value="-">　　　　　★　メニュー　★</OPTION> <OPTION value="-">------------------------</OPTION> <OPTION value="java_tokei1.html">時計の色と大きさをかえてみよう</OPTION> <OPTION value="java_hizuke.html">今日の日付を表示させよう</OPTION> <OPTION value="java_alert1.html">ボタンでアラートを表示させよう</OPTION> <OPTION value="java_back1.html">ボタンで背景の色をかえてみよう</OPTION> <OPTION value="java_link1.html">ボタンでリンクさせよう</OPTION> <OPTION value="-">------------------------</OPTION> </select> </FORM> 以上のようなドロップダウンメニューを入れたのですが リンク先を別ウインドウで開くことはできるでしょうか？ _blankをどこかにいれられますでしょうか？

  • ドロップダウンメニューのサイズ設定

    ドロップダウンメニューのサイズ（幅）が大きいので小さくしたいのですがこのソースの何処を変えればいいのでしょうか 教えてください <SCRIPT LANGUAGE="JavaScript"> <!-- function Mylink(Sel){ mlink=Sel.options[Sel.selectedIndex].value; if(mlink!="-"){ window.open(mlink,"","toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes"); } } //--> </SCRIPT> <FORM method="post"> <select onChange="Mylink(this)"> <OPTION selected value="-">　　　　　★　メニュー　★</OPTION> <OPTION value="-">------------------------</OPTION> <OPTION value="呼び出し先">呼び出す名前</OPTION> <OPTION value="呼び出し先">呼び出す名前</OPTION> <OPTION value="呼び出し先">呼び出す名前</OPTION> <OPTION value="呼び出し先">呼び出す名前</OPTION> <OPTION value="呼び出し先">呼び出す名前</OPTION> <OPTION value="-">------------------------</OPTION> </select> </FORM>

  • ドロップダウンメニューによるアイフレームへのリンク

    現在Webサイトを作っています。 ですがドロップダウンメニューからリンクをし、リンク先をアイフレームにするのがうまくいきません。 問題のページのHTML、及びJavaScriptは以下の通りです。 <html> <head> <script type="text/javascript"> <!-- function Mylink(form,sel){ mlink=sel.options[sel.selectedIndex].value; if(mlink!="-"){parent.albumf.location.href=mlink;} } //--> </script> </head> <body> <center> <IFRAME name="albumf" frameborder=0 src="●●.html" scrolling=no allowtransparency=true></IFRAME> <BR> <BR> <FORM method="post"> <select onChange="Mylink(this.form,this)"> <OPTION selected value="-">　　　　　＊ メニュー ＊</OPTION> <OPTION value="-">------------------------</OPTION> <OPTION value="●●.html">項目１</OPTION> <OPTION value="▲▲.html">項目２</OPTION> <OPTION value="-">------------------------</OPTION> </select> </FORM> </center> </body> </html> JavaScriptに関する様々なページを調べましたが、どうしても自力で解決できませんでした。 どなたか改善方法を教えて下さい。 よろしくお願いします。

  • プルダウン連動とリンク

    選択項目により連動するプルダウンを利用し、各々のページにリンクさせようと思っているのですが、上手くいきません。 一つ目のプルダウンで項目を選択⇒二つ目のプルダウンに項目が表示される⇒選択するとリンクする。 プルダウンはこちらのソースを利用しています。 http://d.hatena.ne.jp/Mars/20071109 連動リンクはこちらを参考にしました。 http://air.rulez.jp/shop/java/jt_pulldown.htm 現在のソースは下記のようになっています。 プルダウンの連動とリンク、それぞれ単体での動作確認は出来たのですが、組み合わせると上手くいきません。 最初のプルダウンで「YYY」を選択し、連動して次のプルダウンに表示される「yahooかgoogle」を選択したらURL先にリンクしたいのですが。 現在はプルダウンは連動はされるものの、2つめのプルダウンで項目を選択しても何も起こらない状態です。 ----------------------------------------------------------------- <script type="text/javascript" src="ConnectedSelect.js"></script> <form> <select id="SEL1"> <option value="XXX">XXX</option> <option value="YYY">YYY</option> </select> <select id="SEL2" onChange="top.location.href=value"> <optgroup label="XXX"> <option value="x1">x1</option> <option value="x2">x2</option> </optgroup> <optgroup label="YYY"> <option value="http://www.yahoo.co.jp/">yahoo</option> <option value="https://www.google.co.jp/">google</option> </optgroup> </select> </form> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script> --------------------------------------------------------------- これはどのように修正すればリンクされるようになるでしょうか？ また別の方法があればそちらでも構いません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

  • プルダウンのリンクについて

    javascriptで以前にもリンクについて質問させていただいたものです。 http://okwave.jp/qa4980697.html この質問で丁寧に回答いただいたのですが、私の知識(理解力)不足の為、自分の思ったような動作をしなかったため再度質問させていただきました。 質問としては、「.html」拡張子のみをリンクとして別ウィンドウに表示したいということです。それ以外の拡張子はございません。 自分で作成したソースを記載致しますので修正点等をご教授ください。 何分初心者なので全く検討違いな構文になっているかと思いますが、ご容赦ください。 <script type="text/javascript"><!-- function Jump(){ if (str.match(/\.html?$/)) window.open(str,'_blank'); } //--></script> <body> <title>test</title> <form name="form"> <select name="SEL1"> <option value="">-----------</option> <option value="aa">aa</option> <option value="bb">bb</option> </select> <select name="SEL2"> <option value="">-----------</option> <optgroup label="aa"> <option value="aa1">aa1</option> <option value="aa2">aa2</option> </optgroup> <optgroup label="bb"> <option value="bb1">bb1</option> <option value="bb2">bb2</option> </optgroup> </select> <select name="SEL3"> <option value="">-----------</option> <optgroup label="aa1"> <option value="aa3">aa3</option> <option value="xxx.xxx.html">リンク</option> </optgroup> </select> 　　　　　　　　　　　～省略～ <select name="SEL10"> <option value="">-----------</option> <optgroup label="xx"> <option value="xx1">xx1</option> <option value="yyy.yyy.html">リンク2</option> </optgroup> </select> <input type=button value="go" onClick="Jump()"> </form> としたのですが、エラーで ライン：8(<html><body>があるため) 文字：14 エラー：'str'は宣言されていません。 と表示されてしまいます。 前回fujillin様に丁寧に解説していただき参考サイトまでご教授いただいたのですが、拡張子を特定して判別するという作業が理解できず再度質問させていただきました。どのようにfunction部分を構成すればリンクとして表示できるようになりますでしょうか？ご面倒なことで申し訳ないですが、よろしくご教授お願い致します。

  • ホームページでBGM

    過去の投稿をもとにホームページ内にプルダウン式の音楽再生用のHTMLを書き込んだのですが、Web上で再生しようとすると、 「ランタイムエラーが発生しました。デバッグしますか？ 行：13 エラー：書き込みできません となってしまいます。 ホームページ作成ソフト（ビルダー7）のプレビューでは再生されます。 これはどうしてでしょうか？？ 以下にHTMLを書いておきます。 <SCRIPT LANGUAGE="JavaScript"> <!-- function MyLink(){ alink=document.flink.slink; mlink=alink.options[alink.selectedIndex].value; if(mlink!="-"){ location.href=mlink; } } //--> </SCRIPT> <form method="post" name="flink"><select name="slink"> <option selected value="-">選んでね</option> <option value="-">・・・・・・・・・・・・・</option> <option value="C:\Documents and Settings\****My Documents\****.mid">music1</option> <option value="C:\Documents and Settings\****My Documents\****.mid">music2</option> <option value="C:\Documents and Settings\****My Documents\****.mid">music3</option> <option value="-">・・・・・・・・・・・・・</option> </select> <input type="button" value="GO!" onClick="MyLink()"></form>

    • ベストアンサー
    • HTML
  • フォームの組み合わせでリンク先を指定する方法

    4つの項目から選択して、テキストフィールドに入力した番号の組み合わせでダイレクトに詳細のページに飛ぶようにしたいのですが、 初心者のためにつまずいてしまいました。よろしくお願いします。 <SCRIPT language="JavaScript"> <!-- function setData(txt) { document.pass.word.value = txt; } function PassLink(){ PassWord=document.pass.word.value; check = /()/; if (!PassWord.match(check == /ri/)) window.open("http://www.●.co.jp/1r/"+PassWord+"/"+PassWord+".html", "","toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes"); else if (!PassWord.match(check == /rk/)) window.open("http://www.●.co.jp/member/1r/"+PassWord+"/"+PassWord+".html", "","toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes"); else if (!PassWord.match(check == /pi/)) window.open("http://www.●.co.jp/ap/"+PassWord+"/"+PassWord+".html", "","toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes"); else window.open("http://www.●.co.jp/member/ap/"+PassWord+"/"+PassWord+".html", "","toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes"); } // --> </SCRIPT> <FORM name="pass"> <select onChange="setData(this[this.selectedIndex].value)"> <option value="ri">RI</option> <option value="rk">RK</option> <option value="pi">PI</option> <option value="pk">PK</option> </select> <INPUT type="text" name="word" size="9" value="a" maxlength="9"> <input type="button" value="　検 索　" onClick="PassLink()" name="button"> </FORM> どなたかお詳しい方、助けていただけないでしょうか。 よろしくお願いいたします。

  • 複数プルダウンでメニューを初期表示に戻したい

    No.157334でleaz024さんに「複数プルダウンメニュー」について教えてもらったものですが、ひとつ、追加したいことがあるので教えてください。 教えていただいたスクリプトは <script language="javascript"> <!-- function A_Li() { 　　Sel=document.Link1.OP.selectedIndex; 　　Ms=document.Link1.OP.options[Sel].value; 　　parent.main.location.href=Ms;} function B_Li() { 　　Sel=document.Link1.OP2.selectedIndex; 　　Ms=document.Link1.OP2.options[Sel].value; 　　parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> <SELECT name="OP2" onChange="B_Li()" size="1"> <OPTION Value="aaa.htm" SELECTED>ページを選んでください <option value="bbb.htm">ぺージ1</option> <OPTION Value="ccc.htm">ページ2 <OPTION Value="ddd.htm">ページ3 </SELECT> です。 例えば OP2のメニューをクリックしたあと OP3のメニューをクリックしたときにOP2のメニューが初期の 表示メニューに戻したいのですが、どう変えればよいでしょうか。 初心者なので本を見てみたのですがわかりませんでした。 どうぞよろしくお願いいたします。

  • javascript をhtmlページで使用する方法を教えてください。

    <form name=\"addr\"> リンク先－＞ <select name=\"list\" onChange=\"chg_url()\"> <option value=\"http://www.yahoo.co.jp\">yahoo1</option> <option value=\"http://www.yahoo.co.jp\">yahoo2</option> <option value=\"http://www.yahoo.co.jp\">yahoo3</option> </select> <a href=\"Dest\" target=_blank> リンク　</a> </form> <script language=\"javascript\"> <!-- pos = 5555; for(num=0;num<document.links.length;num++) { if (document.links[num].href.indexOf(\"Dest\") != -1) { pos = num; num = 5000; } } function chg_url() { if (pos!=5555) { sel = document.addr.list.selectedIndex; document.links[pos].href = document.addr.list[sel].value; } } chg_url(); //--> </script> のスクリプトを同じページに何個も利用したいのですが、どうしたらうまくいきますか？ 同じページにこのスクリプトを設置すると、全部同じページにリンクしてしまいます。java初心者なので、ぜひ教えてください。お願いします。 あと、「java」の質問回答の方に間違えて載せてしまいました。すみませんでした（＞＿＜）

  • 連動プルダウンのリンクについて

    はじめまして。 javascriptをはじめて間もない初心者になりますがよろしくお願いします。 質問内容に不備がありましたら申し訳ございません。 まず行いたいことですが、ここを参考に連動プルダウンを作成しました。 http://d.hatena.ne.jp/Mars/20071109 これを元に選んだ項目によって別ウィンドウにてリンクを表示したいのですが、うまくいかずご質問させていただきました。 リンク項目は決まっておりません。例えば3項目目にあったり2項目目にあったりと。 urlをvalueに入れて参照するからと思い以下を作成してみました。 <script type="text/javascript"><!-- function jump(thisForm){ location.href = thisForm.options[thisForm.options.selectedIndex].value; } //--></script> <form name="thisForm"> <select id="SEL1"> <option value="">---</option> <option value="XXX">XXX</option> <option value="YYY">YYY</option> <option value="ZZZ">ZZZ</option> </select> <select id="SEL2"> <option value="">---</option> <optgroup label="XXX"> <option value="x1">x1</option> <option value="x2">x2</option> </optgroup> <optgroup label="YYY"> <option value="y1">y1</option> <option value="y2">y2</option> </optgroup> <optgroup label="ZZZ"> <option value="z1">z1</option> <option value="z2">z2</option> </optgroup> </select> <select id="SEL3"> <option value="">---</option> <optgroup label="x1"> <option value="x1a">x1a</option> <option value="x1b">x1b</option> </optgroup> <optgroup label="x2"> <option value="x2a">x2a</option> <option value="x2b">x2b</option> </optgroup> <optgroup label="y1"> <option value="y1a">y1a</option> <option value="xxx.xxx.html">y1b</option> </optgroup> <optgroup label="y2"> <option value="y2a">y2a</option> <option value="y2b">y2b</option> </optgroup> <optgroup label="z1"> <option value="z1a">z1a</option> <option value="z1b">z1b</option> </optgroup> <optgroup label="z2"> <option value="***.***.html">z2a</option> <option value="z2b">z2b</option> </optgroup> <input type=button value="GO" onClick="Jump(this.form)"> </form> </select> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script> この場合にボタンを押してリンクをさせたかったのですが、エラーが表示されエラーを参照して調べたのですが、どこをどう直せばいいのか、全く間違っているのかも分からず質問させていただきました。ネットでも調べてみたのですが、どの方法が一番合うかも分かりませんでした。 拙い文章で申し訳ないですが、ご教授いただけますでしょうか？ よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する