- ベストアンサー
ロールオーバー式プルダウンメニューでタグの書き方を教えてください。
いつもお世話になります。 ホームページのタグのことですが現在、termsmenu.gifという画像の上にマウスを置くと「プルダウンメニュー1」が表示されるように下記タグを書き込んでいます。 <IMG src="termsmenu.gif" onmouseover="pdMenu('Menu1')" width="88" height="26"> 今回、画像の代わりに特定の文字列、たとえば「総合メニュー」の上マウスを置くとすると、「プルダウンメニュー1」が表示されるようにしたいのですが、タグをどのように書けば良いか教えてください。 よろしくお願いします。
- KENNEL2
- お礼率84% (118/139)
- レンタルサーバ・ASP
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm はいかがでしょうか？ http://css.maxdesign.com.au/listamatic/ などは、<ul><li></li></ul>の組み合わせでいかようにも変更可能です。
関連するQ&A
- プルダウンメニューがうまくいかない
スタイルシート・スタンダード・デザインガイドと言う本を参考にプルダウンメニューを作っていますがうまくいきません。 サブメニューをメインメニューの真横にだすにはどうすればいいでしょう。 ■HTML■ <a href="index.html"><img src="images/home.gif" width="13" height="14">トップページ</a> <span>|</span> <a href="instruction.html"><img src="images/instruction.gif" width="14" height="13">注意事項</a> <span>|</span> <div id="menu1" onMouseOver="MenuOn(1)" onMouseOut="MenuOff(1)"> <a href="event/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">お知らせお知らせ</a> <div class="submenu" id="submenu1"> <a href="event/index.html"><img src="images/submenu.gif" width="8" height="12">イベント１</a> <span>|</span> <a href="event/2.html"><img src="images/submenu.gif" width="8" height="12">イベント２</a> <span>|</span> <a href="event/3.html"><img src="images/submenu.gif" width="8" height="12">イベント３</a> </div> </div> <span>|</span> <a href="aaaaaaaa.html"><img src="images/menu.gif" width="8" height="12">ああああああああ</a> <span>|</span> <div id="menu2" onMouseOver="MenuOn(2)" onMouseOut="MenuOff(2)"> <a href="mainmenu1/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">メインメニュ１</a> <div class="submenu" id="submenu2"> <a href="mainmenu1/index.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ１</a> <span>|</span> <a href="mainmenu1/submenu2.html"><img src="images/submenu.gif" width="8" height="12">さぶめにゅ２</a> <span>|</span> <a href="mainmenu1/submenu3.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ3</a> </div> </div> 省略 </div> ■スタイルシート■ .menu { font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; height:2em; width:140px; border-top:solid 1px #33cc99; position:absolute; text-align:left; left:0; top:95px; padding-left:10px } .menu a { color:#33cc99; border-bottom:solid 1px #33cc99; text-decoration:none; display:block; width:100%; line-height:2em; text-align:left; } .menu a:hover { background-color:#ffffcc; } .menu span { color:#000000; display:none; } .menu img { margin-right:10px; margin-left:5px; border:0 } .submenu a{ background-color:#33cc99; border-bottom:solid 1px #ffffff; color:#ffffff; width:100%; } .submenu { visibility:hidden; position:absolute; left:0; width:140px; padding-left:10px; } .submenu a:hover { background-color:#0099cc; width:140px; } #submenu1 { position:absolute; left:0; } #submenu2 { position:absolute; left:0 } #submenu3 { position:absolute; left:0 } #submenu4 { position:absolute; left:0 } #submenu5 { position:absolute; left:0 } #submenu6 { position:absolute; left:0 } ■Javascript■ function MenuOn(x){ obj=document.getElementById("submenu"+x).style.visibility="visible"; } function MenuOff(x){ obj=document.getElementById("submenu"+x).style.visibility="hidden"; }
- 締切済み
- JavaScript
- プルダウンメニューを作りたい
javascriptに関して、ほとんど知識がないのですがトップページの メニュー部分を最近よく使われている、プルダウン形式にする様に 依頼されました。 その仕様としては、 オンマウスになったときに、隠されているメニューが表示され、なおかつ ロールオーバーで画像がきりかわり、 マウスオーバーになったときには、また隠れる。 といったものです。いろいろと方法はあるかと思いますが、 <SCRIPT LANGUAGE="JavaScript" SRC="./common/fw_menu.js"></SCRIPT> と、外部ファイルfw_menu.jsを読み込むようにして、fw_menu.jsに は function fwLoadMenus() { if (window.fw_menu_0) return; window.fw_menu_1 = new Menu("root",324,35,"Osaka, MS UI Gothic",12,"","","",""); fw_menu_1.addMenuItem("<A HREF='./topics/index.html' onMouseOver='changeImage('pto01', './img/body-btn-pto01_over.gif');' onMouseOut='changeImage('pto01', './img/body-btn-pto01.gif');'><IMG NAME='pto01' SRC='./img/body-btn-pto01.gif' WIDTH='90' HEIGHT='37' BORDER='0'></A><BR>",""); fw_menu_1.hideOnMouseOut=true; fw_menu_1.writeMenus(); } // fwLoadMenus() と切り替わる画像とそのロールオーバーを記述しました。 結果、オンマウスした時に、指定した座標位置に画像body-btn-pto01.gifはきちんと表示されるのですが、ロールオーバーが作動しません！！ おそらく↑の記述にミスがあると思うのですが、その原因がつかめず朝に なってしまいました。。。。 どなたか、javascriptに詳しいかた、↑の記述の間違いを私に教えて下さい。 どうか、よろしくお願い致します。
- ベストアンサー
- JavaScript
- 外部ファイルの記述の仕方
HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか？ <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>
- ベストアンサー
- JavaScript
- ロールオーバーが表示されない
ココログでブログを作成しています。 パソコン知識は低いですが、簡単なタグを親切に教えてくれるサイトを参考にがんばってカスタマイズしています。 以下の通りでロールオーバーが簡単にできるとのことでやってみましたがうまくいきません。 【参考にしたタグ】 <img src="★" border="0" onmouseover="this.src='●'" onmouseout="this.src='■'"> ★最初に表示される画像のファイル ●オンマウスで表示される画像のファイル ■マウスをはずしたとき表示される画像のファイル 【私が入力したタグ（？？のところにココログのアドレスが入ります】 <IMG src="http://？？.cocolog-nifty.com/images/★のファイル.gif" onmouseover="this.src='http://？？.cocolog-nifty.com/images/●のファイル.gif'" onmouseout="this.src='http://？？.cocolog-nifty.com/m/images/■のファイル.gif'"> 【トラブルの現象】 １）1枚だけ表示されマウスを持っていくと×印になり二度と表示されません。 ２）HTMLの編集欄にタグを貼り付け保存→記事の作成で確認→htmlの編集欄に戻ると、タグの順番が逆になる（↓このようになる） <p><img onmouseover="this.src='●'" onmouseout="this.src='■'" src="★" border="0" /></p> うまく表示する方法がございましたら教えて頂けると助かります。 尚、他のサイトのロールオーバーは表示されております。
- 締切済み
- ブログ
- メニューをスタイルシートで設定
画像を使用したメニューをULタグとLIタグで作成し、 スタイルシートで余白等の設定しましたが、画像の下に余白が入ってしまいます。 背景色をつけたところ、LIタグに余白がついていることは 確認できたのですが、これをなくす方法が分からずにいます。 HTML----------------------------------------------------- <UL> <LI><IMG src="img/img1.gif" width="265" height="21"></LI> <LI><IMG src="img/img2.gif" width="265" height="21"></LI> <LI><IMG src="img/img3.gif" width="265" height="21"></LI> </UL> CSS----------------------------------------------------- UL { list-style-type:none; margin:0px; padding:0px; } LI { padding:0px; margin:0px; } アドバイスを頂けると助かります。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- 一つのタグ内での要素の優先順位？ってあるのでしょうか？
こんにちは。よろしくお願いします。 自分が作成していたWebシステムのページをアクセシビリティチェックツール～にかけ出てきたエラーのことでちょっと疑問に思い質問させていただきます。 ・一つのタグ内の要素の優先順位は、厳密に言うとあるのだろうか？ ということなんですがー。。。 チェックにかけた項目は <img>タグです。 ・<img src ="img.gif" alt ="イメージ画像" width ="100" height ="100"> と ・<img src ="img.gif" width ="100" height ="100" alt ="イメージ画像"> と、の違いなのですが、上記タグではOKが出るのですが、下記タグでは、間違い！！と表示されるようです。 この場合、<img>タグ内の要素について、src→alt→width→heightという優先順位がついているのか、それとも、ただ単にそのアクセシビリティチェックツールのバグなのか。 タグ内要素の優先順位～についてご存知の方がいましたら、ご教授願えませんでしょうか？よろしくお願いします。
- ベストアンサー
- HTML
- ロールオーバー画像の枠線を消したい
初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、（４ヶ所とも）今度は何も表示されなくなってしまいました。 ＜問題のタグのひな形＞ <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします！
- ベストアンサー
- JavaScript
- cssヘッダー画像の下に配置したい画像が重なります
css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。 固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？ よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>
- ベストアンサー
- HTML
- 作動しないCSSのプルダウン(1)
windowsバージョン７で確認すると、CSSのプルダウンが起動しません。 下記URLのナビゲーション部分、「BOARDS」という部分と「ＳＴＯＲＥ」 という部分です。CSSに詳しいお方、ご教授いただけないでしょうか？ http://staceysurfboardsjapan.com/sstt.html 【ＨＴＭＬ部分】 <ul id="pulldown-menu"> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/boards.gif',1)"><img src="images/boards2.gif" name="Image9" width="149" height="26" border="0" id="Image9" /></a> <ul> <li><a href="/stacey/boards/twist.html"><img src="images/m_twist.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/guild.html"><img src="images/m_guild.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/s3.html"><img src="images/m_s3.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/s4.html"><img src="images/m_s4.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/s6.html"><img src="images/m_s6.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/cd2.html"><img src="images/m_cd2.gif" width="149" height="30" /></a></li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','images/m_jmodel.gif',1)"><img src="images/m_gn.gif" name="Image31" width="149" height="30" border="0" id="Image31" /></a></li> </ul> </li> </ul> 載せきれないので次の投稿でＣＳＳも記載します。
- 締切済み
- その他（インターネット・Webサービス）
- ロールオーバーが上手くいかないのです。。
JAVAなどを使わずに、マウスON/OFFで画像を変えるには 下記のタグ構成が一番簡単かと思ったのですが 実行すると最初に表示される画像だけが出て、 その画像の横に「×」（←画像が表示出来なかった時によく出るバッテンマーク）が 2つ出るだけで、ロールオーバーが出来ません。 色々なHTML関係のサイトを覗いてみましたが どうも上手くいきません。。。 もし下記のタグで間違いがなければ 私のパソコン（ブラウザ?）がおかしいのかも知れませんが＾＾； 初心者ですので基本的なことを見落としている可能性がありますが、 どうかアドバイス宜しくお願い致します。 -------------------------------------------- <html> <head> <title>タイトル</title> </head> <body> <IMG src="最初に表示される画像" border="0" onMouseOver="this.src='マウスを乗せた時表示される画像'" onMouseOut="this.src='マウスを離した時表示される画像'"> </body> </html> ----------------------------------------------- （追伸）よくロールオーバーのサンプルなんかを見ていると GIF形式ばかりなのですがJPGでも問題はないですよね？＾＾；
- ベストアンサー
- HTML
お礼
maid110さん、早速にご回答ありがとうございます。 おかげさまでScriptの構成がわかりました。 再度読み直し、挑戦いたします。 これからもよろしくお願いします。