javascript - JQueryで文字列を分割するには?

Question

PNGアイコンのメニューがあります。ユーザーがメニュー項目にカーソルを合わせると、PNG アイコンが GIF アイコンに変わります。私はこれを試しました： jsFiddle

$("#image").mouseenter(function(){
    // I can set GIF url here
    $(this).attr("src","http://jsfiddle.net/img/logo.png");
});

$("#image").mouseleave(function(){
    $(this).attr("src","http://jsfiddle.net/img/logo-white.png");
});

しかし、私はこれが正しい方法ではないことを知っています。すべてのメニュー項目でこれを行うことはできません。これは私のHTMLです:

<ul>
    <li>
        <a> item 1
        <img src="image-path" />
        </a>
    </li>
    <li>
        <a> item 2
        <img src="image-path" />
        </a>
    </li>
</ul>

私はこの質問に従いましたが、これは私が望むものではありません。パスの最後.または最後で分割したい。/

このコードは、すべての文字で文字列を分割します/:

var data =$("#image").attr("src");
var array = data.split('/');

質問：

私はこの画像パスを持っています:../images/icon1.pngそして、これらのパスに変更したい:

../images/icon1.gifまた../images/hover/icon1.gif