もう一度onclickを利用した伸縮メニューの作成方法を教えてください
- もう一度onclickを利用した伸縮メニューの作成方法を教えてください。先日教えていただいたソースと現在自分の作成したページのソースは別々なページとしては動くのですが同一ページに記述してプレビューすると先日教えていただいた'onclick'は開いたままで、動作的には'onclick'のメニューをマウスでクリックすると開いたままのメニューが一度閉じて再度開く動作をしてしまいます。
- 以前教えていただいたonclickを利用した伸縮メニューの作成方法を再度教えてください。自分の作成したページで試したところ、開いたまま閉じない不具合が発生しています。ソースは別のサンプルから引用しており、同一ページ内で先日教えていただいたソースと組み合わせて使用しています。
- ホームページビルバーV14を使用しています。メインメニューが５つあり、ロールオーバー効果を持たせています。各メニューはonmouseoverとoutでポップアップメニュを表示させるようにしています。以前教えていただいたソースは別のページで試したところ正常に動作したのですが、同一ページ内で先日教えていただいたソースと組み合わせると開いたまま閉じなくなります。どうすれば正常に動作するようになるでしょうか？
- ベストアンサー
もう一度onclickを利用した伸縮メニューの作成方法を教えてください
もう一度onclickを利用した伸縮メニューの作成方法を教えてください。 以前"onclickを利用した伸縮メニューの作成方法を教えてください。"と質問に教えていただき思ったように動きとても感謝しているですが、自分の作成しているHPにソースを書き込んでみたら伸縮メニューが開いたまま閉じませんでした。たぶん自分のページに、教えていただいたソース以外に他のサンプルから引用したスクリプトがあるので上手く行かないのではないかと思ったので再度質問させてください。 作成したページのソースが長くなるので全部書き込めないのですが、おおまかには、メインメニューが５つありロールオーバー効果を持たせています。その各メニューはonmouseoverとoutでポップアップメニュを表示させるようにしています。 作成しているソフトはホームページビルバーV14です。 別なサンプルから引用したスクリプトは、 <SCRIPT language="JavaScript"> <!-- var tid,pm_no=""; function pm_op(sel){ if(pm_no!=""&&pm_no!=document.getElementById(sel)){pm_no.style.overflow='hidden';} pm_no=document.getElementById(sel); clearTimeout(tid); pm_no.style.overflow='visible'; } function pm_cl(sel){ pm_no=document.getElementById(sel); clearTimeout(tid); tid=setTimeout("pm_no.style.overflow='hidden';",500); } //--> </SCRIPT> ソースは、 <DIV id="cont" align="center"> <TABLE width="870" border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD align="center"> <CENTER> <DIV style="width : 850px;position : relative;top : 0px;left : 0px;"> <DIV class="menu" style="left:0;" id="f1" onmouseover="pm_op(this.id);" onmouseout="pm_cl(this.id);"> <CENTER> <DIV style="text-align : center;border-style : none;width : 170px;height : 32px;bottom : auto;"><A href="#" id="HPB_ROLLOVER4" name="HPB_ROLLOVER4" onmouseout="HpbImgSwap('HPB_ROLLOVER4', 'image/n_image1.gif');" onmouseover="HpbImgSwap('HPB_ROLLOVER4', 'image/m_image1.gif');"><IMG src="image/n_image1.gif" width="170" height="32" border="0" name="HPB_ROLLOVER4"></A></DIV> <TABLE style="font-size:12px;"> <TR> . . . </TBODY> </TABLE> でid="f1"から"f5"で5つのメニューが動くようにしています。 先日教えていただいたソースと現在自分の作成したページのソースは別々なページとしては動くのですが同一ページに記述してプレビューすると先日教えていただいた"onclick"は開いたままで、動作的には"onclick"のメニューをマウスでクリックすると開いたままのメニューが一度閉じて再度開く動作をしてしまいます。 CSSがまだまだ未熟でわかり難いところも多々ありますが、わかればで結構です。 どなたか教えてください。
- jeday8118
- お礼率74% (56/75)
- JavaScript
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞先日教えていただいた"onclick"は開いたままで 多分スタイルが記述されていないか、もしくはカスケーディングされてしまっているだけではないでしょうか？ html ヘッダの一番最後に以下の記述を書き込んでテスト。 <script type="text/javascript"> <!-- document.write( '<style type="text\/css">' + '.Tab_child { height: 0; }' + '<\/style>' ); // --> </script> </head> <body>
関連するQ&A
- onclickを利用した伸縮メニューの作成方法を教えてください。
onclickを利用した伸縮メニューの作成方法を教えてください。 http://javascript123.seesaa.net/article/107467993.htmlさんののサンプルソースを基に自分なりのメニューができて非常に感謝しているのですが、もう2点改良したいのでどなたか教えてください。 (1)：一番上のメニュー"画像 img "をクリックするとサブメニューが表示されるのですが、2番目のメニュー”ブログ カスタマイズ”を押した時に一番上のメニューが閉じずにそのまま”ブログ カスタマイズ”のサブメニューが表示して欲しいのです。3番目のメニュー"スタイルシート "も同じです。つまり1回目のクリックで開き次クリックするまで閉じないで欲しいのです。 (2)：一番上のメニュー"画像 img "のサブメニューは常時開いたままで2つめ以降のメニューを(1)で書いたような動作はできないでしょうか？ 改良すべきソース箇所とソースを詳細に教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- onClickで画像を消し、下の部分を選択する方法
javascript超初心者です。 どなたか、解決法を教えて頂けないでしょうか？ ●解決したい事 onClickで画像を消し、position: absolute;で画像の下に配置した<div>コンテンツ</div>の部分を選択できるようにしたいのですが、どうも選択できません。 IEでは選択できるのですが、chrome、firefox、safariでは画像が被っていた部分は選択できず、画像が被っていない部分しか選択できない状態になります。 IEでは出来るので、他のブラウザでも出来るのではないかと思ってしまいます。 何を変えればいいのでしょうか？ どうか宜しくお願いします。 ソース抜粋 <body> <span onClick="this.style.visibility='hidden'"><img src="画像" width="1080" height="800" /></span> <div id="wrapper" style="position:absolute; top:0px" width="1080" height="1500"> コンテンツ </div> </body> 上記のソースのwrapper下側700px部分しか選択できないのです。 どうか宜しくお願いします！
- ベストアンサー
- JavaScript
- ロールオーバー効果にならない。
ロールオーバー効果にならない。 宜しくお願いします。 ホームページビルダー10にてホームページを作成中です。 リンクメニューのボタンでロールオーバー効果を使おうと定番手順(参考書の記載通り)に やっているのですが、うまくいきません。 同手順でこのページはできて、このページはできない！？って感じです。 HTMLで確認してもよく分かりません(ほど素人ですが・・・)。 ご教授宜しくお願いします。 ちなみに・・・ ＜ならないパターン＞ <td height="37"><a href="http://ブログID.fc2.com/" id="_HPB_ROLLOVER8" onmouseout="HpbImgSwap('_HPB_ROLLOVER8', 'xxxx.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER8', 'xxxx.gif');" target="_blank"><img src="xxxx.gif" width="190" height="37" border="0" name="_HPB_ROLLOVER8" /></a><a href="#"> </a></td> ＜なるパターン＞ <DIV style="top : 183px;left : 498px; position : absolute; z-index : 3; " id="Layer3"><A href="home.html" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'xxxx.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'xxxx.gif');"><IMG src="xxxx" width="172" height="139" border="0" name="_HPB_ROLLOVER1"></A></DIV> どちらとも 挿入→画像効果→ロールオーバー効果の手順にて作成しました。 宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- プルダウンメニューが設置できません
http://miyakekobo.fc2web.com/contents/kowaza032.html ↑このページ内で配布されているプルダウンメニューを設置したいのですが…。下記がそのソースです。 <DIV id="固有のＩＤ" style="width:800;height:36;overflow:hidden;font-size:12px;"> メニュー本体 </DIV> 「クリックでメニューを開く」は下記<DIV>で、上記<DIV>と入れ子になっています。 <DIV style="width:200;padding:10;border:1px solid #999999;text-align:center;cursor:pointer;" onclick="zoom_on();"> クリックでメニューを開く </DIV> JavaScript部分 <SCRIPT language="JavaScript"> <!-- var max = 開いた時の縦幅; var min = 閉じた時の縦幅; var i = min; function zoom_on(){tid=setInterval("kakudai();",10);} function zoom_off(){tid=setInterval("syukusyou();",10);} function kakudai(){ i+=5;if(imin-1){document.getElementById("固有のＩＤ").style.height=i+"px";}else{clearInterval(tid);} } //--> </SCRIPT> をホームページ作成ソフトのホームページビルダーで入力し、 プレビュー画面で「クリックでメニューを開く」をクリックすると、 ランタイムエラーが発生しました。 デバッグしますか？ 行:35 エラー:'imin'は宣言されていません。 と、表示されます。 どのように設置すればよいのでしょうか。 何方かご教授ください。 よろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- firefoxでmargin-topが効かない
下記のソースとCSSでHPを制作しています、 ナビゲーション<ul id="menu">その下に <!-- content --> <div class="title">としてimgを入れてます、 ナビゲーションと<div class="title">の間に<div class="title">側で margin-top : 20px;を指定しました、IE6・7・8では希望通り表示されますがfirefoxではmargin-top : 20px;が無視されているのか ナビゲーションと<div class="title">の間がくっついて表示されます。 どなたか解決策、間違いがありましたらご指導ください、お願いします。 ソース記述 <!-- menu --> <ul id="menu"> <li id="mnu1"><a href="index.html" id="index.html" name="index.html" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'menu/menu1.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'menu/menu01.gif');"><img src="menu/menu1.gif" width="114" height="44" alt="HOME" name="_HPB_ROLLOVER1" /></a></li> 以下省略 </ul> <!-- /menu --> <!-- content --> <div class="title"><img src="img/titlebar.gif" width="772" height="37" alt="楽しいケーキ作り" /> <h2>まずは生地作りから</h2> <p>●********** <br /> <p> </div> CSS記述 ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; padding: 0px; } ul#menu li{ float : left; list-style-type : none; .title{ margin-left : 14px; margin-bottom : 5px; margin-top : 20px; width : 772px; } .title h2{ font-size : 15px; padding-top : 12px; padding-left : 23px; margin-bottom : 20px; font-weight : bold; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; margin-top : -40px; } .title p{ font-size : 14px; color : #ffffff; padding-left : 20px; line-height : 1.6; margin-bottom : 10px; margin-top : 0px; width : 772px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; letter-spacing : 1px; } 以上宜しくお願いします。
- 締切済み
- HTML
- 写真と文字の大きさをそろえたい
ビルダーを使いながらやっているのですが 二つのものを左右に並べて上下同じ大きさで表示したいのですが、 下記では同じ大きさになっていると思うのですが、 大きさが（上下の大きさのみ※左右は異なってよいのですが） ことなって表示されてしまいます。 解決方法を教えてください。。。 <DIV style="width : 191px;height : 335px;top : 94px;left : 157px; position : absolute; z-index : 10;" id="Layer8" class="hpb-lb-tb1-cell1" align="center"> <SPAN class="hpb-body4"><SPAN STYLE="line-height:1"><span style="font-size:15pt"> <B><STRONG>ここに文字</STRONG></B></SPAN></SPAN></SPAN> </DIV> <DIV style="width : 412px;height : 295px;top : 94px;left : 347px; position : absolute; z-index : 9; " id="Layer9" class="hpb-lb-tb1-cell2" align=""><IMG src="hpb_i_top10.jpg" alt="イメージ" width="412" height="295"></DIV>
- ベストアンサー
- ホームページ作成ソフト
- CSSでメニューバー
初心者の質問ですいません。 CSSでこのようにボックス分けして * { margin : 0 ; padding : 0 ; } body { width : 100% ; } #my_body{margin:0 auto; width:875px;} #my_header { width : 100% ; height : 80px ; } #my_header2{ width : 100% ; background-color: #0080ff;} #my_navigation{float:left; width:150px; background-color: #0080ff; min-height: 1000px;} #my_contents{float:left; width:725px; background-color: #e5f6ff; min-height: 1000px;} #my_footer { width : 100% ; clear : both ; background-color: #0080ff; } HTMLのコード <div id="my_body"> <div id="my_header">一番上のタイトルとグラデーション</div> <div id="my_header2"> グラデーション <style type="text/css"> body { background-image: url("縦長の写真"); background-repeat: repeat-x; } </style> メニューバー <form> <input type="button" value="" class="li01" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li02" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li03" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li04" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li05" onClick="URL'" /> </form> </div> 左のメニューバー <div id="my_navigation"> <div id="mynavi"> </div> </div> 本文 <div id="my_contents"> <div id="mymain"> </div> </div> フッダー <div id="my_footer"></div> </div> これで、my_header2で指定したグラデーションがメニューバーの両側に表示されると思うのですが、グラデーションが表示されません。 初心者なので根本的な間違えを起こしていたらすみません。 なぜ表示されないか教えていただけませんか。 長文失礼しました。
- 締切済み
- HTML
- 見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法に
見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法について 見出しや左メニューの部分のhtmlをページ全体の後ろのほうに配置したいと考えています。 添付の画像のソースが以下のとおりです ----------------------------------------------------------------------- <div style="position:relative;margin:auto;width:800px;"> <div style="height:20px;width:100%;background-color:#ff0000;"> </div> <div style="margin:0px 0px 0px 150px;width:650px;background-color:#00ff00;"> ああああああ<br /> ああああああ<br /> ああああああ<br /> ああああああ<br /> </div> <div style="position:absolute;top:20px;left:0px;width:150px;background-color:#0000ff;"> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> </div> <div style="height:20px;width:100%;background-color:#ffff00;"> </div> </div> ----------------------------------------------------------------------- 一応、左メニューについて実現できていて、見出しも同様にやれるのですが、 この方法では、absoluteで配置しているため、フッターの部分を重ならない ようにするためには、見出しとフッターの間のブロックについて高さを指定する しか方法を思いつきません。 ・absoluteで配置する以外の方法があるでしょうか。 ・absoluteで配置したとしても、高さを指定しない方法があるでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- ロールオーバー効果でエラーが出ます。
ホームページビルダーの９を使用してます。 マウスロールオーバー効果の設定をしたところ、エラーが出てしまいます。 「オブジェクトを指定してください」というエラーでマウスを乗せると2回もそのエラーが出てきます。 ソフトの指示通りに設定してるのに何故エラーが出るのかわかりません。 ちなみにソース表示は、下記です。 <A onmouseout="HpbImgSwap('_HPB_ROLLOVER1','menu1.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','menu1-2.gif');" href="×××.html" id="_HPB_ROLLOVER1"><IMG src="menu1.gif" width="79" height="54" border="0" alt="×××" name="_HPB_ROLLOVER1"></A> 何がいけないのでしょうか？ このソースの前に何か記述すべきなのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- リストタグを用いた縦メニューで画像に隙間ができます（IE6）
いつも皆さまには助けていただきありがとうございます。 さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。 IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。（本当は隙間なくしたい） こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。 #left img{ border:none; display:block; vertical-align:bottom; } と入れたんですが、記入がおかしいでしょうか？ 色々調べてみましたが、これ以上どういじって良いのかよく分かりません。 一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。 よろしくお願いします。 【HTML】 <html> <head> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <title>タイトル</title> </head> <body> <div id="container"> <!--ヘッダー部分--> <div id="header"> <div id="headerImg" title="タイトル"> </div><!--id:headerImgEnd--> <div id="headerMenu"> <ul> <li></li> <li></li> <li></a></li> </ul> </div><!--headerMenuEnd--> </div><!--id#headerEnd--> <div id="contents"> <!--左メニュー--> <div id="left"> <div id="left_menu"> <ul> <li><a href="a.html" id="a" title="a">a</a></li> </ul> <ul> <li id="b" title="b"></li> <li><a href="c.html" id="c" title="c"></a></li> <li><a href="d.html" id="d" title="d"></ul> </div><!--id:left_menuEnd--> </div><!--id:leftEnd--> <!--メイン--> <div id="main"> </div><!--mainEnd--> <!--フッター--> <div id="footer"> </div><!--id:containerEnd--> </div> </body> </html> 【CSS】 body{ margin:0; padding:0; text-align:center; font-size:14px; } #container{ margin:0 auto; width:800px; text-align:left; borer:solid 1px #999; } #header{ width:800px; } div#headerImg{ width:800px; height:138px; background-image:url(img/title.gif); background-color:#00FFcc; } div#headerMenu{ width:800px; } #contents{ width:800px; } /*左メニュー*/ #left{ float:left; width:180px; } #left_menu ul{ list-style:none; padding:0; margin:0; } #a{ background-image:url(../img/a.gif); width:180px; height:69px; display:block; margin-top:0px; margin-left:0px; } #b{ background-image:url(../img/b.gif); background-repeat:no-repeat; width:180px; height:30px; display:block; margin-top:0px; margin-left:0px; } #c{ background-image:url(../img/c.gif); background-repeat:no-repeat; width:180px; height:25px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#c:hover{ background-image:url(../img/c02.gif); background-repeat:no-repeat; } #d{ background-image:url(../img/d.gif); background-repeat:no-repeat; width:180px; height:24px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#d:hover{ background-image:url(../img/d02.gif); background-repeat:no-repeat; } /*メイン*/ #main{ float:right; width:620px; margin:-14px 0 0 0; } /*フッター*/ #footer{ clear:both; width:800px; height:47px; }
- ベストアンサー
- HTML
お礼
教えていただきありがとうございました。さっそくソースを張り付けてみたのですが駄目でした。 スタイルは記述確認しました。 あと一歩なのですが・・・ 問題点のパターンは２通りあり、"onclickを利用した伸縮メニューの作成方法を教えてください。"のソースともうひとつ別に引用したサンプルと同じページ内で動かしてみると ●１つ目は、作成の仕方を、"onclick"のソース内容をあらかじめ作成し動作確認したページに、id="f1"から"f5"のソース内容その中へ書き込んだ時には、ビルダーのページ編集画面では、ソース内容は全て表示するのですがプレビュー画面では、メインメニューのid="f5"に使用しているGIF画像ががバツ印になり１つだけ表示され"f5"のポップアップしたサブメニューが全て右寄りになりました。"onclick"のソース内容は思ったように動きました。 ●２つ目は、"１つ目"と逆で作成の仕方をメインメニューのid="f1"から"f5"までをあらかじめ作成し動作確認したページに、"onclick"のソース内容その中へ書き込んだ時には、編集画面は"１つ目"と同じで全て表示するのですが、プレビュー画面では"onclick"のソース内容は開いたままでそのメニューをクリックすると、開いていたサブメニューが一度閉じて再度開きました。 ２つ目についてはIEでは、"onclick"のメニューは開いたままなのですが、Firefoxでは下記(1):の希望通り動きました。 なぜなのでしょうか？IEでも動いてほしいのですが・・・ http://javascript123.seesaa.net/article/107467993.htmlさんのサンプルを引用すると上記の(2)つは思ったように動いてくれるのですが、自分の希望は、http://javascript123.seesaa.net/article/107467993.htmlさんのサンプルの動きに加えて (1)：一番上のメニュー"画像 img "をクリックするとサブメニューが表示されるのですが、2番目のメニュー”ブログ カスタマイズ”を押した時に一番上のメニューが閉じずにそのまま”ブログ カスタマイズ”のサブメニューが表示して欲しいのです。3番目のメニュー"スタイルシート "も同じです。つまり1回目のクリックで開き次クリックするまで閉じないで欲しいのです。 (2)：一番上のメニュー"画像 img "のサブメニューは常時開いたままで2つめ以降のメニューを(1)で書いたような動作はできないでしょうか？ です。 申し訳ありませが、どなたか私の希望通りにく動くソースを教えてください。 よろしくお願いいたします。