イメージとしては、オズモールのような感じです。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>が切り替わっていくイメージです。
今のサンプルのソースを使って出来るのでしょうか、
それとも他に参考になるようなものがあるのでしょうか。。
お手数ですがご教授いただけるとうれしいです。
よろしくお願いいたします。
そのサンプルのコメント欄にヒントがありますよ。
スライド部分を画像と文字の組み合わせにすることは可能ですよ。
ソースでスライド部分の画像をそのように置き換えてみてください。<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件)