ｊｓ ロールオーバー？？

http://columbia.jp/notyet/index.html

このトップ画像の上にあるタイトルとメニューバーを真似したいのですが、どうすればいいのでしょうか？ドリームウィーバーのロールオーバーの応用みたいな感じでしょうか・・・

No.2 ベストアンサー 回答者： fujillin 回答日時： 2011/04/04 16:15

No1様が既にお答え済みですが…

ご提示のサイトでは、javascriptを利用して行なっているようです。
例えばメニューに使われている文字（画像で作られていますが）の一つを見てみると、
　<http://columbia.jp/notyet/template/badge.png>
のよう両方の画像が一枚になっているもののが用意されていて、実際にはこのうちの半分のサイズが表示されるようになっています。

マウスオーバー/アウトのときに、No1様が説明なさっているように、この画像をアニメーション的に上/下にずらしながら表示させるしくみになっています。
この操作を行なうのに、ご提示のサイトでは、jqueryというスクリプトのライブラリを利用しているようです。

この回答へのお礼

ありがとうございます。

お礼日時：2011/04/08 19:43

No.1 回答者： taloo 回答日時： 2011/04/04 14:07

上から下に切り替わるアニメーションGIFと、下から上に切り替わるアニメーションGIFの２つを、

マウスオーバー、マウスアウトで切り替えてみて下さい。

JavaScriptでアニメーションさせるなら、
画像を上下に2つ並べて１つの画像にし、スタイルシートのoverflow:hiddenを指定した上でwidthとheightを指定して表示しておき、
JavaScriptではタイマーを使用し、マウスオーバー、マウスアウトのそれぞれでmargin-topを変更してみて下さい。

この回答へのお礼

ありがとうございます。

お礼日時：2011/04/08 19:43