ロールオーバーで大きくバナーを表示

質問

こんばんは。質問させて頂きます。

図のように、
メインバナーがあり、横にサイドバナーがある状態です。

サイドバナーにマウスオーバーをすると、
サイドバナーの内容に合わせた広告が、メイン部分に表示。

そして、メイン部分は、
常に３つの広告で、ふわ～～っとスライドショーにしたいです。

どうしてもできませんでした。

お手数ではございますが、
教えてくださる方、よろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

＞どうしてもできませんでした。
どのへんができていて、どのへんができないのでしょうか？
漠とした質問よりも、できない部分について質問なさった方が回答者が回答しやすいと思いますが…

マークアップも不明だし、全部のコードを回答していると長くなってしまうので考え方のみですが、

＞常に３つの広告で、ふわ～～っとスライドショーにしたいです
どのようなものを言っているのか不明ですが、fadeInみたいなものであるならば、opacityをアニメーション的に操作して透明度を下げていくようにすることでフェードインが可能です。
自動のスライドショーにするには、これを一定間隔で行なえばよいので、setIntervalなどを利用して順に表示するようにしておけば可能です。
対象のメイン部分の重なり順に注意する必要があります。要素の順序を入替えて制御するか、z-indexの値で制御するかのどちらかかな。

＞サイドバナーにマウスオーバーをすると、
＞サイドバナーの内容に合わせた広告が、メイン部分に表示。
普通のイベント処理で可能だと思いますが、（↑）のスライドショーとの関係を考慮する必要があります。
イベント処理内で、一時的にスライドショーを停止（clearIntervalなどで）してから対象の要素を表示し、その後、スライドショーを再開するように考えればよろしかと。
スライドショーの順序を、マウスオーバーで表示したものから続けるのか、もともとの順序に戻って行なうのかなど詳細な部分はご自由に。

fadeInには多少の時間がかかるので、マウスオーバーが起きた時にfadeInの処理中の可能性があります。その時に、実行中のfadeInを停止して新しくfadeInを始めるのか、あるいはそちらはそのまま続けて、別にfadeInを始めるかといった考え方によっても、表示部分のHTMLの構造が変わってくるかも知れません。
後者の場合だと、表示要素をコピーして重ねてfadeInしていくのが考えやすいです。（終了時に隠れた要素を削除）

ライブラリ（jquery）などを利用して作成するという選択肢もあるかも。
（考えることに関しては基本的には同じですが、コーディングが簡単になります）

お礼

ありがとうございました。