画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのプラグイン

JavaScript

前に作った画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのスクリプトをプラグイン化してみました。特に追加したアニメーションもありませんがね。単純に1つにまとめてアニメーションの変更等をしやすくしたくらいです。

Demo

必要なファイル

対応ブラウザ

  • Google Chrome
  • Safari4~
  • Firefox3~
  • Internet Explorer6~
  • Opera11

※Windowsのみの確認です。

コーディング＆設定

HTML

HTMLヘッダー内でjquery.jsを読み込む。

<script src="jquery.js" type="text/javascript"></script>

ロールオーバーさせる要素の設定します。下記JavaScriptの設定だとimg要素にclass="rollover"です。

<img src="sample1.gif" class="rollover">
<img src="sample2.gif" class="rollover">
<img src="sample3.gif" class="rollover">

画像ファイル名

ロールオーバー用画像（形式はなんでもOK）を用意し、ロールオーバー前の画像ファイル名の最後にロールオーバー用の文字列（初期設定：_ov）を追加する。その画像をロールオーバー前の画像と同じフォルダに入れる。

（例）ロールオーバー前の画像がsample.gifならsample_ov.gifというファイル名にする。

JavaScript

以下のスクリプトを記述。

5行目でスクリプトを実行しています。オプションは下の方で説明します。もちろんclass別にアニメーションを複数設定することも可能です。

(function($){

	//プラグイン実行
	$(function(){
		$("img.rollover").imgOvAnime(); //実行する要素を記述。オプションあり。
	});

	//プラグイン
	$.fn.imgOvAnime = function(option){

		var o = $.extend({
			ovStr: "_ov",
			speed: 500,
			type: "fade"
		},option);
		var overElements = $(this);

		//フェード関数
		function fade(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative"}).each(function(){
				var self = $(this);
				var url = self.attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				var ovImg = $("<img>").attr("src",url).css({position: "absolute"});
				function anime(a_alp){
					self.stop().animate({opacity:a_alp},speed);
				}
				self.before(ovImg).hover(
				function(){
					anime("0");
				},
				function(){
					anime("1");
				});
			});
		}

		//スライドトップ関数
		function slideTop(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative",opacity:"0"}).each(function(){
				var self = $(this);
				var urlDef = self.attr("src");
				var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				var imgBack = $("<img>").attr("src",urlDef).css({position:"absolute"});
				$(window).bind("load",function(){
					var w = self.width()+"px";
					var h = self.height()+"px";
					var ovImg = $("<span>").css({
						width: w,
						height: "0",
						backgroundImage: "url("+urlChange+")",
						position: "absolute",
						fontSize: "0"
					});
					function anime(a_h){
						self.prev().stop().animate({height:a_h},speed);
					}
					self.before(imgBack).before(ovImg).hover(
					function(){
						anime(h);
					},
					function(){
						anime("0");
					});
				});
			});
		}

		//スライドレフト関数
		function slideLeft(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative",opacity:"0"}).each(function(){
				var self = $(this);
				var urlDef = self.attr("src");
				var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				var imgBack = $("<img>").attr("src",urlDef).css({position:"absolute"});
				$(window).bind("load",function(){
					var w = self.width()+"px";
					var h = self.height()+"px";
					var ovImg = $("<span>").css({
						width: "0",
						height: h,
						backgroundImage: "url("+urlChange+")",
						position: "absolute"
					});
					function anime(a_w){
						self.prev().stop().animate({width:a_w},speed);
					}
					self.before(imgBack).before(ovImg).hover(
					function(){
						anime(w);
					},
					function(){
						anime("0");
					});
				});
			});
		}

		//フェードスライドトップ関数
		function fadeSlideTop(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative",opacity:"0"}).each(function(){
				var self = $(this);
				var urlDef = self.attr("src");
				var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				var imgBack = $("<img>").attr("src",urlDef).css({position:"absolute"});
				$(window).bind("load",function(){
					var w = self.width()+"px";
					var h = self.height()+"px";
					var ovImg = $("<span>").css({
						width: w,
						height: "0",
						backgroundImage: "url("+urlChange+")",
						position: "absolute",
						opacity: "0",
						fontSize: "0"
					});
					function anime(a_h,a_alp){
						self.prev().stop().animate({height:a_h,opacity:a_alp},speed);
					}
					self.before(imgBack).before(ovImg).hover(
					function(){
						anime(h,"1");
					},
					function(){
						anime("0","0");
					});
				});
			});
		}

		//スライドトップ2関数
		function slideTop2(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative",opacity:"0"}).each(function(){
				var self = $(this);
				var urlDef = self.attr("src");
				var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				$(window).bind("load",function(){
					var w = self.width()+"px";
					var h = self.height()+"px";
					var imgBack = $("<span>").css({
						width: w,
						height: h,
						backgroundImage: "url("+urlDef+")",
						position: "absolute",
						fontSize: "0"
					});
					var ovImg = $("<span>").css({
						width: w,
						height: "0",
						backgroundImage: "url("+urlChange+")",
						position: "absolute",
						fontSize: "0"
					});
					function anime(a_h1,a_h2){
						var selfOvImg = self.prev();
						selfOvImg.animate({height: a_h1},speed);
						selfOvImg.prev().stop().animate({height: a_h2},speed);
					}
					self.before(imgBack).before(ovImg).hover(
					function(){
						anime(h,"0");
					},
					function(){
						anime("0",h);
					});
				});
			});
		}

		//フェード拡大縮小関数
		function fadeSizing(){
			var ovElm = overElements;
			var ovStr = o.ovStr;
			var speed = o.speed;
			ovElm.css({position:"relative",opacity:"0"}).each(function(){
				var self = $(this);
				var urlDef = self.attr("src");
				var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2");
				$(window).bind("load",function(){
					var w = self.width()+"px";
					var h = self.height()+"px";
					var imgBack = $("<span>").css({
						width: w,
						height: h,
						backgroundImage: "url("+urlDef+")",
						position: "absolute",
						fontSize: "0"
					});
					var ovImg = $("<span>").css({
						width: "0",
						height: "0",
						backgroundImage: "url("+urlChange+")",
						position: "absolute",
						opacity: "0",
						fontSize: "0"
					});
					function anime(a_w1,a_w2,a_h1,a_h2,a_alp1,a_alp2){
						var selfOvImg = self.prev();
						selfOvImg.stop().animate({width: a_w1,height: a_h1,opacity: a_alp1},speed);
						selfOvImg.prev().stop().animate({width: a_w2,height: a_h2,opacity: a_alp2},speed);
					}
					self.before(imgBack).before(ovImg).hover(
					function(){
						anime(w,"0",h,"0","1","0");
					},
					function(){
						anime("0",w,"0",h,"0","1");
					});
				});
			});
		}

		//アニメーションタイプ確認
		switch(o.type){
		case "fade":
			fade();
			break;
		case "slideTop":
			slideTop();
			break;
		case "slideLeft":
			slideLeft();
			break;
		case "fadeSlideTop":
			fadeSlideTop();
			break;
		case "slideTop2":
			slideTop2();
			break;
		case "fadeSizing":
			fadeSizing();
			break;
		}

	}

})(jQuery);

オプション

ovStr （ロールオーバー用画像の追加文字列）
適当な文字列 （初期設定：_ov）
speed （アニメーション速度）
適当な速度の数値 1000＝1秒 （初期設定：500）
type （アニメーションタイプ）
fade、slideTop、slideLeft、fadeSlideTop、slideTop2、fadeSizing （初期設定：fade）

オプション設定例

$("img.rollover").imgOvAnime({
	ovStr: "_over",
	speed: 200,
	type: "slideTop"
});

注意点

img要素に以下のスタイルを適用すると高確率でホバー画像の位置がずれます。まあ、あまり指定することもないと思うので問題ないかと。

type: "fade" の場合
float、positon
type: "fade" 以外の場合
float、position、border、padding、margin

あとがき

本当はコンストラクタ関数でクラス的なことをして綺麗にソースをまとめたかったんですが、上手くいかなくて、自分の力ではほぼ全ての処理をアニメーションタイプ別に記述するのが精一杯でした。ホント長ったらしいソースだことで。

Top