ロールオーバーした時、画像を入れ替えしたい

マウスオーバーをした時、画像が入れ替わるようにしたいです。
元々ある画像入れ替えのjsがあるのですが、その記述だと、<a>タグの中にある<img>タグを指定しています。
ただ、今回はflexsliderのサムネイルとして使っていて、スライドと紐づけているdate-thumbの画像をマウスオーバーで入れ替えたいのですが、どの部分をどのように書き換えたらいいのかがわかりません。
お恥ずかしい話、自分が作成したjsでないため、下記の記述がどういう意味なのか、ぼやっとしかわかっていません。よろしくお願いします。

html部分

js部分
$(function(){

// 要素指定 var mObj = $('.plan'); // 指定要素内に対象の画像が存在する場合に処理開始 var btnSet = mObj.find('[class*="type_"] a>img'); if(btnSet.length){ // オーバー画像プリロード for(var i=0; i<btnSet.length; i++){ $('<img>').attr('src',btnSet.eq(i).attr('src').replace('_out', '_over')); } // ボタン処理 btnSet.on('mouseover',function(){ // 必要なclassの取り出し var classArr = new Array(); classArr = $(this).parents('[class*="type_"]').attr('class').split(' '); for(var i=0; i<classArr.length; i++){ if(classArr[i].match(/type_/)){ classArr[0] = classArr[i]; break; } } // 画像入れ換え var imgSet = $('.'+classArr[0]+' a>img', mObj); for(var i=0; i<imgSet.length; i++){ if(imgSet.eq(i).attr('src').indexOf('_out')>-1){ imgSet.eq(i).attr('src', imgSet.eq(i).attr('src').replace('_out', '_over')); }else{ imgSet.eq(i).stop(true, true).animate({opacity: 0.5}, 300); } } }).on('mouseout',function(){ // 必要なclassの取り出し var classArr = new Array(); classArr = $(this).parents('[class*="type_"]').attr('class').split(' '); for(var i=0; i<classArr.length; i++){ if(classArr[i].match(/type_/)){ classArr[0] = classArr[i]; break; } } // 画像入れ換え var imgSet = $('.'+classArr[0]+' a>img', mObj); for(var i=0; i<imgSet.length; i++){ if(imgSet.eq(i).attr('src').indexOf('_over')>-1){ imgSet.eq(i).attr('src', imgSet.eq(i).attr('src').replace('_over', '_out')); }else{ imgSet.eq(i).stop(true, true).animate({opacity: 1}, 100); } } }); }

});