https://q-garden.com/wp-content/themes/hitoiro-wp-blog/js/jquery.tgImageRollover.js

1/* 
2 * jquery.tgImageRollover
3 * for jQuery 1.8.1
4 * 
5 * 【概要】<img class="rollover" src=~~ /> とした画像を
6 * ファイル名末尾に「_on」を付加した画像でロールオーバーするプラグインです。
7 * 
8 * ＜ファイル名の例＞
9 * 元画像：nav01.png
10 * ロールオーバー画像：nav01_on.png
11 * 
12 * @Copyright : 2012 toogie | http://wataame.sumomo.ne.jp/archives/1687
13 * @Version   : 1.0
14 * @Modified  : 2012-09-10
15 * 
16 */
17
18;(function($){
19	$.fn.tgImageRollover = function(options){
20
21		var opts = $.extend({}, $.fn.tgImageRollover.defaults, options);
22
23		$(opts.selector).each(
24			function(){
25				this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+ opts.attach +"$2");
26				this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;" />');
27				$(this).before(this.onHtml);
28
29				$(this.onHtml).hover(
30					function(){
31						$(this).stop().animate({'opacity': '1'}, opts.onFadeTime);
32					},
33					function(){
34						$(this).stop().animate({'opacity': '0'}, opts.offFadeTime);
35					}
36				)
37			}
38		)
39	}
40
41	// default option
42	$.fn.tgImageRollover.defaults = {
43		selector : 'img.rollover',
44		attach : '_on',
45		onFadeTime : 600,
46		offFadeTime : 400,
47	};
48
49})(jQuery);