マウスオーバーで画像のタブの表示切り替え

サムネイルをクリックすると拡大画像が切り替わるのはWebショップでお馴染みですが、
そんな風に並ぶ異なるバナーボタンにマウスオーバー&クリックすることで、横のメイン画像をjQueryで切り替え表示させたい。
その際、バナーボタンはロールオーバーで用意した別画像に変化、メイン画像表示時は該当バナーボタンはロールオーバーで変化したままをキープで、という要望。

画像の切り替えはよく見かけるけれど、サムネイル自身の変化は、CSSで枠線をつけるとか、透明値を変化させるというものばかりだったような。
そして探し回ってたどりついたのがこちら。

メニューにマウスオーバーするとメイン画像が切り替わるナビゲーションjQueryプラグイン「ImageNavigation」 | NET-KING


これで行ける!と参考にさせていただき無事完成。
ところがそこで、「メイン画像」といってもその中クリッカプルマップでリンクを仕込みたいということに。
残念ながらこの方法では無理ということで、別アプローチで、タブでの切り替え表示を利用することに。

が、タブ部分で別々の画像を使用する参考例自体が少なく、しかもロールオーバーで別画像に入れ替わる例は見当たらず。

マウスオーバーでタブの表示切り替え jQuery プラグインなし | Ri-mode Rainbow

こちらを参考にさせてもらい、なんとか解決。

・バナーボタンの画像は、通常時と変化時のペアを並べ1枚画像としてそれぞれ用意。
・並ぶバナーボタンのliにbackground-repeatと通常時の表示のbackground-positionのみ指定。それと別に個別にclassを設けて、それぞれbackground-imageで画像のURLを指定。
・変化させる時の為に、.hoverでbackground-positionを変化時の表示に指定。

jQuery内でのCSSを置き換え指定などでもっとスマートなやり方があるはず!と思ったのですが、強引な力業でなんとかしたかんじです。
今の私にはこれでせいいっぱいでした。

このタブでタブ部分に画像を使用して…ってのは需要ありそうと思うのだけど…
タグ:jquery

2013年09月19日

posted by michi at 16:46 | Comment(0) | Note | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。