ELLIPTiCUS photography

  • ABOUT

  • PORTFOLIO

  • MATERIA

  • BOOKMARK

Recent entry

  • We need peace
  • 北海道旅行記UPしました。
  • portfolioにupしました&素材について
  • jQueryで画像をロールオーバー
  • MTのブログ記事の中身を分けよう

Tag list

accommodation bali browser camera Chiba css food Hakone Hokkaido hongkong info jQuery material MT4 Nagano plugin portfolio reply sightseeing taiwan Tokyo travel update webTech wordpress
COPYRIGHT (c) yuki/ELLIPTiCUS all right reserved.
February 2, 2010

jQueryで画像をロールオーバー

»jQuery, webTech

してみました。いや、この間マイナーチェンジしたって言ったばかりなのですが、あれは配布されていた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とかソースとかがひどい事になりつつある……そろそろ改装したいですねぇ。

« MTのブログ記事の中身を分けよう
portfolioにupしました&素材について »
» Leave a Reply