面白法人カヤックのサイトが好きで、よく独学のタネに見ています。

しかし、ここ http://www.kayac.com/member の写真のロールオーバーの仕組みが、
ソースを読んでもイマイチ分かりません。
画像を表示させるであろう、class="toimage"の仕組みも、よく分かりません。
どこのCSSをいじれば、このようになるでしょうか?どなたか、教えて下さい!!

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/06/06 16:59:45
  • 終了:2008/06/13 17:00:02

回答(1件)

id:tabbycats No.1

tabbycats回答回数14ベストアンサー獲得回数32008/06/06 20:22:11

ポイント60pt

詳しくは分かりませんがソースを見る限り、ロールオーバーの切替はCSSではなくJavaScriptですね。

MochiKitというJavaScriptライブラリを使用しているみたいです。

切替のスクリプトは「/js/profile.js」の中を見れば分かると思います。


仕組み的には、「写真の上に重なる枠や文字」は画像ではなく(矢印マークのみ画像)、

CSSでそれらのレイアウトを作成しておき、それをJavaScriptで切替(写真の上に重ねる)ている感じです。


枠などのレイアウトに関しては「/css/member/index.css」内でboxProfileListと検索すれば分かると思います。


「class="toimage"」に関しましては、CSSでカラー等を指定し、フォントのリプレイスをJavaScriptで行うためにあるようです。

リプレイスに関しては、「/js/common.js」内でtoimageと検索してみてください。


詳しい説明はできませんが、ご参考までに。


http://mochikit.com/

id:mitatata

JavaScriptですね。そこらへん全然分からんのです。。。

勉強します!!

2008/06/06 20:37:26
  • id:tabbycats
    ロールオーバーのみに視点を置くならば、もちろんCSSでも制作可能です。
    しかし、並び替えや更新の手間を考えれば、JavaScript(Ajax)を使用した方がよいでしょう。
    場合によりけりですね。

    Ajaxについては、こちらで↓
    http://ja.wikipedia.org/wiki/Ajax

    最近ではオープンソースで様々なJavaScriptライブラリが公開されていますので、そちらを活用なさるのも手だと思います。
    XHTML、CSSの知識があれば、簡単に使用できるものも沢山あります。

    参考サイト↓
    http://javascript.webcreativepark.net/

    その他、「Javascript ライブラリ」や「Ajax ライブラリ」など検索してみてください。

    それでは、ご参考までに。
  • id:mitatata
    ありがとうございます!!
    よく聞く名前なので、勉強してみます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません