- 締切済み
ロールオーバ時画像を別画像に重ねるには？
このスカパーのサイト上部のタブのように、 ロールオーバー時に下のコンテンツに画像が重なるようにしたいのですが、これはどうやっているのでしょうか？ スカパー http://www.skyperfectv.co.jp/ このサイトのソースを見たり、ロールオーバーについて書かれている参考サイトを調べたのですがわかりませんでした。 ボタンと下のコンテンツをそれぞれpotision指定で固定すれば良いのかと思ったのですが、うまくいかずかれこれ１時間くらい悩んでいます。 わかる方いらっしゃいましたらお願いします。
- sister69
- お礼率80% (42/52)
- HTML
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
> ロールオーバー時に下のコンテンツに画像が重なるようにしたいのですが、これはどうやっているのでしょうか？ > http://www.skyperfectv.co.jp/ > ボタンと下のコンテンツをそれぞれpotision指定で固定すれば良いのかと思ったのですが、うまくいかず このサイトに関して言えば、左端にサイトのロゴが置かれている白いバーは単なる「背景」画像ですので、それ自体と上のナビボタンは領域が重なっているわけではないですね。 (a)ロールオーバー時に下部に▼がでるナビボタン (b)左のブルーのロゴ (c)右の白いロゴ (d)「English」などのナビボタン これらは親要素である<div id="HeadArea">～</div>に"position: relative;"と白いバー画像を背景に設定した上で、一部は"position: absolute;"で位置指定をしていますが、実際の表示領域は重なり合っていません。なのでz-index（重ね合わせ）の指定は本件の場合は使われていないですね。 ヘッダー部分はJavaScriptで外部ファイルで書き出されていますので、まずそちらを見て実際のマークアップを把握した上で、CSSでの定義も覗いてみて下さい。上記の様に構成されているのがすぐわかりますので。ちなみに、(a)もHTML側ではテキストを挿入してありますがそれを"text-indent: -9999px;"で表示領域から追い出した上で画像部分を全て背景画像（off/on画像が上下に一枚に繋がったもの）として表示し、マウスオーバーの際には下部のon画像の部分が表示される様に"a:hover"で垂直方向の位置をマイナス値にしてずらしています。 ソースを解析するのが理解と応用への一番の近道です。
z-indexとか使われましたか？
関連するQ&A
- ロールオーバーで切り替えられるのは出来るの画像だけ？
リモートロールオーバーで、サイトの更新情報を表示しようと思っています。 テーブルを組んで、サイトの各コンテンツの名前をオンマウスすると、横のセルに画像が表示されるようにしました。 更新情報だけは、画像が半分のサイズで、もう半分にテキスト（更新情報）を表示したいのです。 （以前はインラインフレームでこの方法を取っていたので、フレームを組んだページを表示させていたので問題なかったのですが、オンマウス表示にしたくて、悩んでいます） ロールオーバーの機能では画像だけしか切り替えが出来ないのでしょうか？ また、テーブルの一つのセルの中に、画像とテキストの２種類をオンマウスで表示させる事は可能でしょうか？ 御回答頂けると嬉しいです。
- ベストアンサー
- JavaScript
- ロールオーバーのタグについて教えてください。
はじめまして。 http://www.s-b-c.net/ 現在CSSを使って上のような横並びのロールオーバーのメニューを作成しています。 ロールオーバー自体は出来ているのですが、私が作ったサイトだと全部のボタンが改行なし、空白なし（スペースのための画像も含めて）でdreamweaverでは1行として書かれています。 上のサイトのように改行してキレイに見やすくできればいいのですが、タグを改行して書いていくと最後のボタンが下にずれてはみ出てしまいます。 改行と同時に空白ができているようです・・・ タグで普通に改行して書いても空白とかできるのでしょうか？ できればきちんとこのままのボタンを利用して見やすいソースで作成したいのですが、やり方がわかりません・・・ やはり空白や改行なしで続けて挿入していくしかないのでしょうか？ どうか教えてください。よろしくお願いいたします。
- 締切済み
- HTML
- ロールオーバーで小窓を出したい。
今、ロールオーバーでリンクを指定してあります。 ロールオーバーはHPビルダー2001でつけました。 そのロールオーバーの編集でリンク付けてあります。 このリンクをロールオーバーしている画像を押した時に 小窓で表示される様にするにはどうすれば良いのでしょうか？ 教えてください。
- ベストアンサー
- CSS
- javascriptで作ったロールオーバーがロールオーバーのままになってしまう
質問お願いします。 javascriptで作った画像二枚で表現するロールオーバーボタンの不具合についてです。 ieでの動作は問題なかったのですがsafari3.1.2とfirefox3.03では、 その作ったロールオーバーボタンをクリックして他のページに行き、 そしてブラウザに予め備わっている機能の戻るボタンで元のページに戻るとクリックしたロールオーバーボタンがマウスが重なっていないのにロールオーバーしたままの状態になってしまいます。 (その状態でもう一度ロールオーバーボタンにマウスを重ねると元に戻ります。) 流れを簡単に書かせていただきます。 <1.ロールオーバーボタンをクリックする> ↓ <2.他のページにリンクする> ↓ <3.リンク先のページでブラウザの戻るボタンをクリックする> ↓ <4.1のページに戻る> ↓ <5.1でクリックしたロールオーバーボタンがカーソルが触れていないのにロールオーバーした状態> ロールオーバーボタンを作る方法は二通り試したのですが、両方とも上に書いた通りの状態です。 <試した方法> 1.DreamweaberMXのビヘイビア機能で作成。 2.http://css-happylife.com/log/javascript/000157.shtmlこちらのページを参考にさせて頂いての作成。 この不具合の事を気にして色々なウェブサイトを見てみたのですが、やはりjavascriptで作っているであろうロールオーバーボタンは同じような状態のウェブサイトが、多数有りました。 この問題の解決策をご存じの方がいらっしゃいましたら、どうかご教授下さい。よろしくおねがいします。
- 締切済み
- その他（インターネット・Webサービス）
- タブメニューの画像切り替えについて
現在以下のサイトのソースでタブのjavascriptで設置しようとしているのですが うまくいかないため、質問させていただきました。 http://www.ezgate-mt.sakura.ne.jp/jquery/71.html ロールオーバーとアクティブの画像を別々にしたいため、 Javascriptのなかの 「// ロールオーバー 」以下の「_o」と書かれている部分を「_act」と 書き換えて「***_act.gif」という画像も用意しました。 ところが、たとえば番目のボタンをクリックすると画像名が 「nav-04_act_o.gif」になってしまい、画像が消えてしまいます。 ロールオーバーとアクティブの画像を別々にしたいとき どのように設定すればいいのかご教授いただけないでしょうか？ ちなみにコンテンツの切り替えは使用せずボタンの箇所のみを 使用する予定です。 どうぞよろしくお願いします。
- 締切済み
- JavaScript
- ボタン画像の下のFlashにポインタを移動するとロールオーバーのまま（IE以外）
例として、三洋電機と三菱電機のサイトをあげます。 http://www.sanyo.co.jp/ http://www.mitsubishielectric.co.jp/index.html これらのサイトは、メニューにボタン画像を使用しており ロールオーバーの効果をもたせています。 そして、ボタン画像のすぐ下にページのメイン要素となるFlashが配置されています。 私もこのような構造のサイトを作っているのですが、 ひとつ解決できない問題があり悩んでいます。 私の作ったサイトでボタン画像にポインタを乗せるとロールオーバーするのですが、 ロールオーバー状態でポインタをFlashに移動させると ボタン画像が通常の画像に戻らずロールオーバーのままなのです。 ポインタをFlashの領域から外すと通常のボタン画像に戻ります。 この現象は、Win IE以外のブラウザ（FirefoxやSafari）で起こります（Macではまだ検証していません）。 しかし、先述の三洋や三菱のサイトでは、 ボタン画像にポインタを乗せロールオーバー状態でポインタをFlashに移動させても、 ボタン画像が通常の画像に戻ります。 ちなみに、私のサイトでは、ボタン画像をJavaScriptの「rollover.js」を、 Flashは「SWFObject」を使って配置しています。 何か解決策をご存知の方いらっしゃいましたら どうぞ宜しくお願いします。
- 締切済み
- HTML
- ロールオーバーした時に画像が切り替わる時間について
ロールオーバーしたときに、画像が切り替わる時間が違うものがあります。 Webサイトによっては、グローバルメニューの時は瞬時に切り替わるが、他の画像の時はスローで切り替えたりしています。 例えば、次のサイトでは、スライドショーの左側にある3つの画像はスローで切り替わっております。 http://www.treasurekaitori.com/ 私は、HTMLとCSSを使い、瞬時に切り替えることはできたのですが、スローで切り替える方法がわかりません。 もしかしたら、いろいろな方法があるのかもしれません。 いろいろな方からのご教示をお待ちしております。お願い致します！！
- ベストアンサー
- CSS
- Dreamweaver CS3で画像のボタンを押した時に画像を変えたい
photoshopでボタン画像3つ作りDreamweaver CS3で配置し、挿入バーの一般にある『ロールオーバーイメージ』でボタンのロールオーバーはできたのですが、画像のボタンを押ている時だけ別の画像に変えるにはどうしたらよいでしょうか？ Dreamweaver CS3でやる方法が知りたいです。 Flashでボタンを作る方法と背景画像にボタン画像を使用してCSSでやる方法は知っています。
- ベストアンサー
- ホームページ作成ソフト
- ロールオーバーで隣の画像の表示を変えるには。
まずは以下のサイトのナビゲーションバーの下のメインイメージ部分をご覧ください。 http://panasonic.co.jp/excelstaff/ 「事務系派遣・紹介予定派遣」や「エンジニア派遣・紹介予定派遣」にカーソルを合わせると、 左横の画像が変わります。 更にオンマウス時にバーにアニメーションが発生します。 [アニメーション内容] 半分半分だった色が一色に統一されます。 これはFlashによるものだと思いますが、 参考になるサイトや書籍等ございましたら、是非ご教授ください。 なお、Flashは使用せず、つまりアニメーションは使用せず、 CSSやJavascript等を使用して、 左横の画像を変えるやり方も調べています。 併せて、参考になるサイトや書籍等、ご紹介願います。
- ベストアンサー
- Flash
