してみました。いや、この間マイナーチェンジしたって言ったばかりなのですが、あれは配布されていたjavascriptをそのまま使っただけです。しかし何がダメだったかというと、エントリー全体でロールオーバーしてくれないところ。画像の上にマウスがなければ、ロールオーバー出来ないなんて!いや、普通のサイトだったら、むしろ十分なんですけどね。そこでjQueryでいじってみました。
参考にさせて頂いたのはRewish様のこのエントリー。javascriptと違って、jQueryはソースが短くて分かりやすい(ような気がする)!!classも使える!!まあ、jQueryもjsですが。ここの差がイマイチ分かってない初心者です。
参考サイト+私がやりたかったのは
■画像だけではなく、エントリーのdiv全てを選択範囲としてロールオーバー
■記事単体に入った時は、画像はロールオーバーしたままになる
(■参考サイトは_onで画像を変えているが、自分で用意したのは_ovrなのでそっちに変える)
です。
とりあえず、こんなん出ました。
jQuery(document).ready(function($) {
//indexpage / ロールオーバー
var postfix = '_ovr';
$('.entry img.titlePic').not('[src*="'+ postfix +'."]').each(function() {
var img = $(this);
var src = img.attr('src', src_ovr);
var src_ovr = src.substr(0, src.lastIndexOf('.'))
+ postfix
+ src.substring(src.lastIndexOf('.'));
$('<img>').attr('src', src_ovr);
$('.entry').hover(
function() {
img.attr('src', src_ovr);
},
function() {
img.attr('src', src);
}
);
});
//singlepage / ロールオーバーのまま
$('.singlePage img.titlePic').each(function() {
var img = $(this);
var src = img.attr('src', src_ovr);
var src_ovr = src.substr(0, src.lastIndexOf('.'))
+ postfix
+ src.substring(src.lastIndexOf('.'));
$(this).attr('src', src_ovr);
});
});
ま、ぶっちゃけ殆ど変えてないんですよ(笑)でも、私にはこういう風に変えるまでが大変だったわけで。特に後半なんか、もっとスマートなやり方ある気がします。これから頑張らねば……。
■画像だけではなく、エントリーのdiv全てを選択範囲としてロールオーバー
実は、これで一番時間かかってたりして。あははは。元のソースだとimg.hover();でfunction() {}を括っています。なので、ここにエントリーを括っているdiv.entryを入れてあげるだけ。でも、最初って何でも時間かかるものですよね。うん。たぶん。
■記事単体に入った時は、画像はロールオーバーしたままになる
これは悩んだ末に、もう一個.each(function() {});を作る事にしました。幸い、エントリーを括ってるdivが.singlePageと名前が変わっていたので指定しやすかったです。
名前が一緒だったら・・・・がくぶる。
ぶっちゃけ.hover以下のfunctionを全て抜いてあげるだけ。ついでに、var img = $(this);でもう宣言して、その後の動きもないので、.attrの前は$(this)だけで十分でした。
■参考サイトは_onで画像を変えているが、自分で用意したのは_ovrなのでそっちに変える
これは、_onとなっている部分をすべて_ovrに変えるだけ。むしろ、var postfix = ‘ここの宣言’;を変えるだけ。なんだか私は一個だけ記述が違うって、なんだか気持ちが悪かったので全部変えましたが。
そんなこんなで、こんな状態になりました。
が、実はまだ物足りなくて。今、エントリーにマウスを置くと全部の画像の色がロールオーバーしてしまうのです。一個一個に出来ないかなぁ。でも、.entry.hoverは変えられないし……最初は return false;で上手くいくかと思ったんですが、それをやると一個目の画像だけが毎回ロールオーバーになってしまう。
ううーん。もうちょっと悩みます。
っていうか、実験しすぎて、最近このサイトのjsとかソースとかがひどい事になりつつある……そろそろ改装したいですねぇ。

» Leave a Reply