.ATTRの一部だけ（）

Question

私は、ユーザーが<div id="editorial">（マウスオーバー）を置いたとき、私はある<img>の属性を読みたい本

<div id="editorial"> 
    <div id="img_editorial"><img src="folder1/folder2/folder3/logo1.png" /></div> 
</div> 

のような大きなdivの内側に配置さIMG HTMLブロック<img src="folder1/folder2/folder3/logo1.png">を持っていますfolder1/folder2/folder3/logo1.pngは、iがmを持っているので、私は... logo1.pngに戻したいここからlogo1.pngを抽出し、ロゴにon_を追加（on_logo1.png）、その後、マウスアウトで<div id="img_editorial">

をoverwritteするjquery .html() functionで出力しその親のdivの最後の背景の変更...基本的な機能は、マウスが大きなdiv（divの背景の変更など）の上にあるときにロゴをグレイアウトすることです...

私は<img>属性を読み、logo1.pngを抽出し、全体ではなくfolder1/folder2/folder3/logo1.png ...

Answer 1

をあなたはこのように属性を読むことができます：

var img_src = $('#img_editorial img').attr('src'); 

これはあなたを与える：

folder1/folder2/folder3/logo1.png 

をあなたがそれを分割することができるより

：

var split_img_src = img_src.split('/'); 

これは、あなたのような何かの配列を与える：そう、配列の最後の値は、常にファイルの名前でなければなりません

split_img_src[0] = folder1; 
split_img_src[1] = folder2; 
split_img_src[2] = folder3; 
split_img_src[3] = logo1.png; 

を - なしディレクトリツリーの長さです。

これでファイル名を持つことができました。あなたが望むものを追加して、必要なことをすることができます。

幸運。

Answer 2

次のはとする必要があります。 jQuery .data() APIを使用して元の画像を保存し、.mouseleave()の<div>に戻すと元の画像に戻ります。

$('div#editorial').mouseenter(function() { 
    var originalSrc = $('img', this).prop('src'); 
    $(this).data('originalSrc', originalSrc); 
    var pathComponents = originalSrc.split('/'); 
    var logo = pathComponents.pop(); 
    pathComponents.push('on_' + logo); 
    $('img', this).prop('src', pathComponents.join('/')); 
}).mouseleave(function() { 
    $('img', this).prop('src', $(this).data('originalSrc')); 
}); 

The demo作品のようなものが、私はそれように、ちょうど404エラーを何_onイメージを持っていません。私はあなたが考えを得ることを願っています:-)

Answer 3

ここに！ただすてきなソリューション：エフェクトの上にマウスを行うには、CSSを使用することができなかったのはなぜあなたがしたい場合

$('#img_editorial img').hover(function(){ 

    imgSrc = $(this).attr('src'); 
    var imgSplit = imgSrc.split('/'); 
    var imgName = imgSplit[3]; 

    $(this).attr('src', imgSrc.replace(imgName, 'on_'+imgName)); 

},function(){ 

    $(this).attr('src', imgSrc); 

}); 

、およびオープンFirebugのは、このDEMO