jQuery image toggler : yImageToggler

html / css/ javascript를 이용하여 image 를 toggle 시키는 기법은 다양하죠.... 

개인 취향에 맞는 쉬은걸로 사용하시면 됩니다... ;)

요즘 멀더가 jQuery plugin 만들어 보는 재미가 쏠쏠해서, 이것두 하나 만들어 보았습니다. 너무 간단히 만들어서, 문제가 있을것 같은데... 혹 사용하실분은 사용해 보시고, 버그 리포트라도 해 주시기 바랍니다.

연계상품 버튼 이미지에 마우스 오버... 하면 아래와 같이 처리

* yImageToggler javascript source

(function($) {       
	// Author : mulder (@mulderu)
	// Version : v0.1
	// When : 2013.05.22
    $.fn.yImageToggler = function(o) {
        o = $.extend({
             onPostfix: 'on.gif' // mouseOn -> img-name-on.gif
            ,offPostfix: 'off.gif' // mouseOff -> img-name-off.gif
        }, o || {});
        
        return this.each(function(index) {  
        	$(this).hover(function() {
	        	var This = $(this);
	        	var src = This.attr('src');
	        	
	        	if(src.endsWith(o.offPostfix)) {
                    This.attr('src', src.substring(0, src.length-o.offPostfix.length)+o.onPostfix );                 
                }
	        }, function() {
	        	var This = $(this);
                var src = This.attr('src');
                
                if(src.endsWith(o.onPostfix)) {
                    This.attr('src', src.substring(0, src.length-o.onPostfix.length)+o.offPostfix );                 
                }
	        	
	        });
        
        });
  };
})(jQuery);

* demo HTML

* demo javascript

$(document).ready(function () {
       
 $('#mainMenu img').yImageToggler();
        
        
    });