画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのプラグイン
前に作った画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのスクリプトをプラグイン化してみました。特に追加したアニメーションもありませんがね。単純に1つにまとめてアニメーションの変更等をしやすくしたくらいです。
必要なファイル
対応ブラウザ
- 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
あとがき
本当はコンストラクタ関数でクラス的なことをして綺麗にソースをまとめたかったんですが、上手くいかなくて、自分の力ではほぼ全ての処理をアニメーションタイプ別に記述するのが精一杯でした。ホント長ったらしいソースだことで。