jQuery

【jQuery】マウスを置いたときに画像を変更するChanging images on hover

June 2, 2018
ChangeImgOnHover

Changing images on hoverはマウスを置いたときに画像を変更するJavaScriptを数行だけ実装することができる。

Html

<img src='img/cat1.jpg' class='hover' alt='cat 1' />
<img src='img/cat2.jpg' class='hover' alt='cat 2' />
<img src='img/cat3.jpg' class='hover' alt='cat 3' />

Script

 (function($) {
   $.fn.changeImgOnHover = function() {
     $('.hover').each(function() {
       var imgName = $(this).attr('src').slice(0,-4);
       var extName = $(this).attr('src').split('.').pop();
       var hoverImg = imgName + '_hover.' + extName;
       var origImg = imgName + '.' + extName;
       $(this).mouseover(function() {
         $(this).attr('src', hoverImg);
       });
       $(this).mouseout(function() {
         $(this).attr('src', origImg);
       });
     });
   };
 }) (jQuery);