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

Question

mitatata

17

17もっと見る

60pt

インターネットウェブ制作

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

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

回答の条件

URL必須
1人2回まで

登録：2008/06/06 16:59:45
終了：2008/06/13 17:00:02

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

tabbycats 2008/06/06 23:17:15

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

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

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

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

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

それでは、ご参考までに。
mitatata 2008/06/07 13:48:03

ありがとうございます！！
よく聞く名前なので、勉強してみます。

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

tabbycats · Answer 1 · 2008-06-06T20:22:11+09:00

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

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

回答（1件）

tabbycats1432008/06/06 20:22:11

コメント（2件)

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