人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

面白法人カヤックのサイトが好きで、よく独学のタネに見ています。
しかし、ここ http://www.kayac.com/member の写真のロールオーバーの仕組みが、
ソースを読んでもイマイチ分かりません。
画像を表示させるであろう、class="toimage"の仕組みも、よく分かりません。
どこのCSSをいじれば、このようになるでしょうか?どなたか、教えて下さい!!

●質問者: mitatata
●カテゴリ:インターネット ウェブ制作
✍キーワード:Class CSS イマイチ カヤック サイト
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● tabbycats
●60ポイント

詳しくは分かりませんがソースを見る限り、ロールオーバーの切替は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/

◎質問者からの返答

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

勉強します!!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ