jQueryで背景画像と複数画像を変更

質問

jqueryで、divのボックス全体をリンクにし、マウスオーバーでdiv内の画像2点とdivの背景画像を変更したいと考えております。

<div class="linkbox">
　<img src="image01.gif">
　<img src="image02.gif">
</div>

マウスオン用の画像は
image01_on.gif
image02_on.gif
bg01_on.gif
と、統一して「_on」をつけております。

マウスオーバーで背景を変更する方法とマウスオーバーで画像を変更する方法とボックス全体をリンクにする方法はそれぞれ見つけたのですが、うまく組み合わせることができません…

何か解決策がございましたら教えてください。
よろしくお願いいたします。

回答No.1

tracer

imgにこだわらずに、全部背景にしてしまうのはダメですかね？
どちらでも出来ますが、基本的にデザイン・レイアウトの仕事はJavaScriptではなく、CSSに任せたほうが管理が楽ですよ。
そうするとjavascriptはとてもシンプルに記述できます。

以下を簡単に説明すると、あらかじめロールオーバー時の画像をCSSで設定しておいて、JavaScriptではCSSで設定したクラスを追加、削除します。例では、ロールオーバーでhoveractionというクラスを追加して、ロールアウトで削除しています。

--HTML
<div id="linkbox">
　<p id="img1"></p>
　<p id="img2"></p>
</div>

--CSS
#linkbox{
　background : transparent url(背景画像パス) no-repeat;
　cursor : pointer;
}
#img1{
　background : transparent url(image01.gif) no-repeat;
　width : imgの幅px;
　height : imgの高さpx;
}
#img2{
　background : transparent url(image02.gif) no-repeat;
　width : imgの幅px;
　height : imgの高さpx;
}
/*hover時の画像*/
#linkbox.hoveraction{
　background-image : url(背景画像パス) ;
}
#linkbox.hoveraction>#img1{
　background-image : url(image01_on.gif) ;
}
#linkbox.hoveraction>#img2{
　background-image : url(image02_on.gif)
}

--JS
$("#linkbox").on({
　"mouseenter mouseleave" : function(){
　　$(this).toggleClass("hoveraction");
　},
　"click" : function(){
　　window.location.href="リンク先URL";
　}
});

お礼

背景画像にまとめてしまうことも考えたのですが、今回は文字を大きくした場合も対応したかったので、別の方法で制作いたしました。
ご回答ありがとうございました！