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>が切り替わっていくイメージです。

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/11/25 10:09:06
  • 終了:2011/12/02 10:10:03

回答(1件)

id:unarist No.1

unarist回答回数3ベストアンサー獲得回数02011/11/25 16:27:11

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

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

<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に変えて構いません。
コメントには書かれていませんが、このままだとそれぞれの表示が重なってしまいます。横幅と高さに加えて、背景色も指定するといいかと。

コメントはまだありません

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

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

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

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