今回は、jQueryで子要素のsrc属性を取得しつつ、親要素の背景画像に設定する方法です。
マウスオーバーして画像を切り替えるメニューなどを作りたい場合に、cssでいちいち背景画像を設定するのが面倒臭いので、これを使用すると手間が省けます。

サンプルのHTML

<ul>
    
<li>
        <a href="page1">
            <img src="images/menu1.png">
        </a>
    </li>

    
<li>
        <a href="page2">
            <img src="images/menu2.png">
        </a>
    </li>

    
<li>
        <a href="page3">
            <img src="images/menu3.png">
        </a>
    </li>

    
<li>
        <a href="page4">
            <img src="images/menu4.png">
        </a>
    </li>

</ul>

使用するJavascript

$(function(){
  $("ul li").each(function(){
    var list = $(this).find('img');
    var srcImg = list.attr("src");
    var srcOver = srcImg.substr(0, srcImg.lastIndexOf('.')) + '_on' + srcImg.substr(srcImg.lastIndexOf('.'));
    $(this).css('background-image','url('+srcOver+')');
  });
});

結果

</pre>
<pre>
<ul>
    
<li style="background-image: url("images/menu1_on.png");">
        <a href="page1">
            <img src="images/menu1.png">
        </a>
    </li>

    
<li style="background-image: url("images/menu2_on.png");">
        <a href="page2">
            <img src="images/menu2.png">
        </a>
    </li>

    
<li style="background-image: url("images/menu3_on.png");">
        <a href="page3">
            <img src="images/menu3.png">
        </a>
    </li>

    
<li style="background-image: url("images/menu4_on.png");">
        <a href="page4">
            <img src="images/menu4.png">
        </a>
    </li>

</ul>

まとめ

特に大量の要素に背景画像を設定したい場合は、これを使うと楽になると思います。

※カスタマイズの際は、必ずバックアップを取ってからお試しください。また、カスタマイズによって動作に問題が生じた場合、当方では責任を負いかねますのでご了承ください。
まだまだ勉強中の身ですのでカスタマイズ方法が正しくない場合があるかもしれません。もしご指摘を頂ければすぐに修正させて頂きます。今後ともご指導・ご鞭撻の程、よろしくお願い致します。