JS / jQueryで画像パス

ヘッダーのアイコンのimg要素なんかで
header_icon_1.gif と
header_icon_1_active.gif
を切り替えたいときなど

 

これまで

var path = "http://test.com";

みたいの宣言して

$('.hoge').attr({src:path+'/image/header_icon_1.gif'});

とか絶対パスでやっていたのですが
テストアップと本番のURLが違ったりするわけで

 

考えてみれば画像のファイル名だけ変えればよいなと

 

header_icon_1.gif を
header_icon_1_active.gif に
切り替えるとする

<!-- HTML -->
<p class="hoge"><img src="./image/header_icon_1.gif"></p>

 

//js
var targetSrc = $('.hoge img').attr('src'); // 画像URLを取得
var replaceURL = targetSrc.replace('header_icon_1.gif','header_icon_1_active.gif');
$('.hoge img').attr({src:replaceURL});

 

これだけ…
戻すときは逆に