• 締切済み

タブのメニューに画像って・・・

http://hyper-text.org/archives/2007/09/javascript_tab.shtml を参考にjavascriptでタブメニューを作りました。 上手く表示できたのですが、メニュー部分を画像にと、応用しようとしたのですが、うまく出来ません。 何が出来ないかというと、メニューをクリックしたらそのボタンを違う(カレント用の)画像が表示されるようにしたいのですが。。。 やり方や参考サイトなど、情報が有りましたら教えてください!! よろしくお願いします!!!

みんなの回答

回答No.1

例示のscriptでは選択されたタブには「selected」クラスが設定さ れていますから、スタイルシートで適当な背景画像でも指定してや れば一発じゃないでしょうか。

関連するQ&A

  • javascriptを使ったタブでタブにリンク

    http://hyper-text.org/archives/2007/09/javascript_tab.shtml を元にページを作っているのですが、タブにリンクを貼らなければならなくなりました。 javascriptは初心者レベルです。 やり方などありましたら教えてください! よろしくお願いします!!

  • アコーディオンメニューについて教えてください

    http://hyper-text.org/archives/2006/12/slide_menu_javascript.shtml 上記のURLを参考に縦型アコーディオンメニューを作ったのですが、動きがおかしいのを見つけてしまって困っています。 一瞬だけマウスをメニュー項目にもっていって、「あっ違った。もう一個したのメニューの中身が見たかったんだ」と思い、すぐさま下のメニューにマウスをかざすと、最初に選んだメニューが開きっぱなしになっていることがあります。 これは、直らないものなのでしょうか? つまり、 menu #01を選んでからすぐにmenu #02にマウスをもってくる。 menu #01のメニューが開いたままになっている。 すごく困っています。 お願いいたします。

  • 滑らかに開閉するメニューを作りたいのですが。

    自分で調べてみたのですが解決する事が出来ませんでしたので、どなたかお力を貸して下さい。 マウスのオン・オフで、隠れているメニューが閉じたり開いたりするものを作りたいのです。 http://hyper-text.org/archives/2006/12/slide_menu_javascript.shtml 上記のサンプルが非常に近いのですが、理想としては ・メニュー1 ・メニュー2 ・メニュー3 ・メニュー4 となっている場合、メニュー1にマウスを乗せると ・メニュー1  ・サブメニューA  ・サブメニューB  ・サブメニューC  ・サブメニューD と表示され、更にサブメニューAにマウスを乗せると ・メニュー1  ・サブメニューA   ・サブサブメニュー1   ・サブサブメニュー2   ・サブサブメニュー3 というような表示を滑らかな動きで閉じたり開いたりするように表示させたいのですが可能なのでしょうか? 参考サイト等ありましたら教えていただけると助かります。 以上宜しくお願いいたします。

  • HTMLにジャバスクリプトを書く位置は?

    http://archiva.jp/web/javascript/tab-menu.html 上記のサイト「タブ切替ジャバスクリプトプログラム」は、上下2つのスクリプトに分かれています。 上のスクリプトは、「置き場所は</body>直前を勧めとく」と解説されています。 下のスクリプトは、「先の起動部分より先に宣言されていなければならない」と解説されています。 それなら、上下を逆にして1個のスクリプトで書けば良いのではないでしょうか? http://hyper-text.org/archives/2007/09/javascript_tab.shtml その問題を解消する為に、上記のサイトでは「window.onload=function() 」で上のスクリプトを囲んでいます。 どうして、この様な解決法になるのでしょうか?

  • タブ切り替えの初期表示に関して

    jQueryを使用したタブの切り替えを実装しています。 下記ソースに関して、デフォルトの状態ですとselectedを設定した <div id="#a">の内容を初期表示します。 別ファイルからのリンクの飛び先が#bの時は初期表示を<div id="#b">にしたいのですが どうすればよいでしょうか? <ul id="tab"> <li class="selected"><a href="#a">a</a></li> <li><a href="#b">b</a></li> <li><a href="#c">c</a></li> </ul> <div id="#a"> aの内容 </div> <div id="#b"> bの内容 </div> <div id="#c"> cの内容 </div> 下記のスクリプトを使用しています。 http://hyper-text.org/archives/2007/09/javascript_tab.shtml

  • 【HTML】タブメニューの中身となる要素について

    HTML、CSSについて勉強中の者です。 タブメニューによってコンテンツ部分を切り替えるようなサイトがありますが(参考:http://hyper-text.org/archives/2013/05/css_only_tab_ui.shtml)、ほとんどのサイトで、中身となるコンテンツ部分は、全て同じHTMLファイルに記述しているように見受けられます。 コンテンツ部分がそこまで内容的に大きくないものであれば問題ないかと思うのですが、コンテンツ部分で少し複雑な処理をさせる場合などは、どうされているのでしょうか。 iframe要素をコンテンツ部分に入れて、別ファイルを呼び出すような書き方をするのが一般的なのか、あるいはどれだけ長くなろうとも全て一つのHTMLファイルに書いているのか、 もしくは全く別の方法で書かれているのか…。 皆さんがどうされているのか、教えていただきたいです。

  • タブでcookieを使ったのですが…

    Javascriptを使ってタブ付きのボックスを作ったのですが、少々問題があり解決法が見つからないのでここに投稿させていただきます。 カテゴリが[技術者向]となっていますが私は初心者です...。 まずタブで表示を切り替えるUIというのはたとえば以下のサイトにあるようなものですが、問題が起きるのは私が独学で作成したものです。 http://archiva.jp/test/html/tab-menu.html また、以下のような機能があります。 ・タブ以外の部分を非表示にできる(その状態をcookieで記憶しておく) ・表示しているタブをcookieで記憶しておく ・タブにマウスポインタを乗せるとタブの背景画像が変わる(ロールオーバー) ・表示しているタブの背景画像を変える ・ウィンドウの幅に合わせて自在にサイズを変化させる cgiの掲示板にタブ切り替えを設置したのですが、cookieがうまく働いてくれないらしく表示/非表示の操作ができないことがあります... その他にも、ブラウザによって(ウィンドウ幅を縮めると)タブメニューの中の文字がはみ出してしまったり、表示しているタブを記憶できないなどの問題が起きます。 以下のURLに全く同じタブ切り替えを設置しました。 http://www7a.biglobe.ne.jp/~g-s-b/tabs/tabs.html なぜcgiに設置すると問題が起きるのか、全くわかりません... ですが掲示板が複数のcgiで構成されており、タブを含む、css等の共通部分を別に読み込んでいるので、タブを閉じたままにするままにはクッキーを使う以外の方法を思いつきません。 このようなタブ切り替えを安定して、多くのブラウザで利用できるようにするにはどのようにすればよいでしょうか。 また、なぜcgiだと問題(cookieが保存されているのに動作しない等)が起きるのでしょうか。 長くなってしまいましたが、どなたかご回答をよろしくお願いいたします。

  • 画像の横にメニューボタンを並べたい

    企業HPなどでロゴ画像のすぐ横にメニューボタンが綺麗に並んでいるヘッダースタイルをよく見かけますが、どう設定すれば画像とテキストを水平線上に並べられますか? web初心者ゆえ参考サイト等色々調べて見よう見まねでやってみたのですが、横には並ぶものの画像の下部、下揃えにテキストが並んでしまいうまくいきません。 画像の中心部から横1列にしたいのですが… テーブルをはめ込めばよいのでしょうか? また、ウィンドウを縮めると連動してテキストが勝手に動いて段分かれしてしまうのも気になるのでこの問題も宜しければ教えて頂けないでしょうか。 何卒宜しくお願いします。

    • ベストアンサー
    • CSS
  • CSSでグローバルナビゲーションメニューをつくりたい

    CSSで、グローバルナビゲーションメニューのボタンリンクをコーディングしたいと思っています。ボタンをマウスでポインタしたらロールオーバーし、カレントページのボタンはマウスでポイントした時と、同じようにロールオーバー画像を表示させたいと思っておりますが、可能なのでしょうか?

  • タブ切替

    下記サンプルを使ってタブ切替のページを作成したのですが、 タブだけでなく、ページ内に「次へ」「戻る」ボタンを追加する方法を教えてください。 ■タブ切替ページ http://archiva.jp/web/javascript/tab-menu.html ■追加内容 page1 最下部に「次へ」のボタンでpage2へ page2 最下部に「戻る」のボタンでpage1、「次へ」のボタンでpage3へ よろしくお願いいたします。

専門家に質問してみよう