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

jQueryや、javascriptを使って自動で表示が切り替わるページを制作したいです。
イメージとしては、オズモールのような感じです。http://www.ozmall.co.jp/

検索していたら、
以下のようなサンプルページを見つけました。
http://blog.net-king.com/2010/10/06/メニューにマウスオーバーするとメイン画像が切/
左側の大きい画像部分が<img>タグの場合は対応できたのですが、
<img>タグではなく、<div>タグで囲まれたものを動かしたいと思っています。

<a href="#"><img src="images/photo1.jpg" /></a>
の代わりに、<div class="box">?</div>が切り替わっていくイメージです。

今のサンプルのソースを使って出来るのでしょうか、
それとも他に参考になるようなものがあるのでしょうか。。

お手数ですがご教授いただけるとうれしいです。
よろしくお願いいたします。

●質問者: mistotsuboi
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● unarist

そのサンプルのコメント欄にヒントがありますよ。

スライド部分を画像と文字の組み合わせにすることは可能ですよ。
ソースでスライド部分の画像をそのように置き換えてみてください。

<a href="#" ><div class="panel">スライド1</div></a>

こんな感じでしょか。上のようにした場合、panelクラスに横幅と高さを指定するのをお忘れなく。

http://blog.net-king.com/2010/10/06/%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AB%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%99%E3%82%8B%E3%81%A8%E3%83%A1%E3%82%A4%E3%83%B3%E7%94%BB%E5%83%8F%E3%81%8C%E5%88%87/#comment-13

ご質問に合わせて、panelをboxに変えて構いません。
コメントには書かれていませんが、このままだとそれぞれの表示が重なってしまいます。横幅と高さに加えて、背景色も指定するといいかと。

関連質問

●質問をもっと探す●



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