jQueryとFireworksCS4について質問です。

項目の画像はすべて1枚のものとして切り出した方が良いのではないかと思います。

マウスオーバーにはjQueryは使わず、CSSのみで行えます。

ヘッダメニュー内の<a>タグにはそれぞれid="属性名"をつけておいて、CSSにてその<a>タグすべてに同じ1枚画像を背景画像として設定し、項目ごと(<a>タグのid属性名ごと)に背景画像の位置(background-position)を変えるという手法です。

以下のページが参考になりそうです。

http://css-happylife.com/template/07/

項目ごとに通常画像とマウスオーバー画像を別々に用意すると、マウスオーバー時に一瞬画像が出てこない(ロード中のため)こともあり、見栄えがよくないです。

すべてを1枚の画像にすれば、最初の読み込みだけで済み、表示や動作も速くなります。

ページにユーザーがアクセスした際に、該当項目のみマウスオーバー状態にする場合、

jQueryでしたら以下のような記述をすべてのページに入れておけば、該当する<a>タグのみ背景画像の位置が変わる(マウスオーバー状態になる)と思います。

<script type="text/javascript">
$(document).ready(function(){
	//↓#header-menuはヘッダメニュー部分のid属性名(仮)です
	$("#header-menu a").each(function(){
		//↓アクセスURLと<a>タグのURL(href属性)が同じならば
		if(location.href==$(this).attr('href')){
			//↓その<a>タグの背景画像の位置を変更
			$(this).css('background-position','0 -50px');
		}
	});
});
</script>

便利なjQuery(http://jquery.com/)を利用して、ロールオーバーするサンプルがあります。

http://rewish.org/javascript/jquery_rollover

このソースをそのまま流用するのであれば、

　　ファイル名_over.gif

ではなく、

　　ファイル名_on.gif

がロールオーバー時の命名になります。

それと、クラス名に".rollover"を付けておけば、それ(正確にはaタグの中のimgタグのうち.rolloverクラスのもの)を拾って、自動的に処理してくれます。

つまり、記述は

<a href="hoge.html"><img src="hoge.gif" class=".rollover"></a>

としておくだけです。

※当然ファイルは、hoge.gifとhoge_on.gifを用意

どうしても_overがよければ、

$(".rollover a img").not("[src*='_on.']").each(function(i) {

↓

$(".rollover a img").not("[src*='_over.']").each(function(i) {

var imgsrc_on = this.src.substr(0, dot) + '_on' + this.src.substr(dot, 4)

↓

var imgsrc_on = this.src.substr(0, dot) + '_over' + this.src.substr(dot, 4)

の２箇所を修正すれば問題ないはずです。