ロールオーバー？どうやっているのでしょう

質問

ホームページ制作上で以下サイトのような効果が分からず質問させて頂きます。
http://panasonic.jp/

各カテゴリのBOX「デジタル・AVC」などに使用している効果です。
-----
通常時　Flashのように画像が切り替わり
マウスオーバー時にメニューが表示（メニューもon/off効果）→更に各製品へリンク
-----

Flashを使用なのかjavascriptを使用しているのか単にcssによる手法なのか
頭悩ませています。

お分かりになる方ご教授お願い申し上げます。
何を使用しているだけでも結構です。。

回答No.3

sr-ki

＞通常時　Flashのように画像が切り替わり
ここはjavascriptです。html上ではすべての画像を出力しておいて、それをjavascriptで順番に切り替えています。

＞マウスオーバー時にメニューが表示
これもjavascriptです。メニューの部分もhtml上は全て出力しておいて表示上は消しておきます。表示されているバナー画像の領域にマウスオーバーするとその部分にメニュー部分を表示させています。メニューの文字はサイズを合わせるためにそれぞれテキストではなく画像を使っていますね。

＞（メニューもon/off効果）
ここはCSSのhoverを使ったロールオーバーです。（a要素にhoverで背景=矢印アイコンを切り替え）です。

回答No.2

ORUKA1951

スタイルシートですね。
firefox+fireBugで調べるとよいです。
Firefox アドオン - Firebug | Mozilla Japan ( https://addons.mozilla.jp/firefox/details/1843 )

回答No.1

axel_eye

途中まで、追っかけてて断念してしまったのですが、
CSSで実現しているのではないでしょうか？

ddタグのbackground url属性にアニメーションgifを指定し、
ddのタグの内側でliタグを使ってロールオーバーを実現してるようです。

当方は、CSSが詳しくないので2段のロールオーバーが実現できるかわからないのですが、
メニュー表示の方はロールオーバーである事はソースから確認しました。

お礼

ご回答ありがとうございます。

ソースからはやはりCSSでなんとかしてるみたいですね。
ちょっと気合い入れてやってみます。