Result
http://jsfiddle.net/kachibito/ZWXWu/embedded/result,js,css,html
jQuery
(function($) { var _options = new Array(); var _itemId = 0; jQuery.fn.MyFadeOverImage = function(options) { _options[_options.length] = $.extend({}, $.fn.MyFadeOverImage.defaults, options); var idx = _options.length-1; var opt = _options[idx]; //ラップしてマスクをかける $(this).each(function(){ $(this).attr("idx", idx); $(this).fadeTo("fast", opt.normalAlpha); $(this).wrap("<DIV class=tongBg></DIV>"); $(this).parent().css("background", opt.normalToneColor); $(this).parent().css("width", opt.imageWidth+"px"); $(this).parent().css("height", opt.imageHeight+"px"); //ホバーとホバーアウト時のフェードエフェクト }).mouseenter(function(){ $(this).stop(); $(this).fadeTo(_options[idx].fadeInSpeed, _options[idx].hoverAlpha); }).mouseout(function(){ $(this).stop(); $(this).fadeTo(_options[idx].fadeOutSpeed, _options[idx].normalAlpha); }); } jQuery.fn.MyFadeOverImage.defaults = { normalAlpha:0.8, hoverAlpha: 1, normalToneColor:"#000", fadeInSpeed: "1000", fadeOutSpeed: "1000" }; })(jQuery); //セレクタとそれぞれの設定 $("div.demo01 img").MyFadeOverImage({ normalAlpha:0.5, hoverAlpha: 1, normalToneColor:"#cbf5f5" }); $("div.demo02 img").MyFadeOverImage({ normalAlpha:0.3, hoverAlpha: 1, normalToneColor:"#cece8c" }); $("div.demo03 img").MyFadeOverImage({ normalAlpha:0.5, hoverAlpha: 1, normalToneColor:"#ce8c8c" }); $("div.demo04 img").MyFadeOverImage({ normalAlpha:0.6, hoverAlpha: 1, normalToneColor:"#ff8040" });
css
.demoImgDiv , .tongBg { margin:5px; } .demoImgDiv { padding-left:40px; } .demo{margin-bottom:20px;clear:both;} .tongBg { background:#000; float:left; } img { border:0px; cursor:pointer; width:150px; }
html
<div class="demo02 demo"> <img src="01.jpg"> <img src="02.jpg"> <img src="03.jpg"> </div>