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(); });