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

ヘッダメニューをFireworksCS4で、項目毎に1枚の画像がテーブルで区切られ配置されるよう作成しました。
各項目画像には、マウスオーバー画像(ファイル名_over.gif)を用意しており、jQueryを使用して簡単に切り替わるようにしたいと考えています。
つまりonMouseOver="何かのjavascript関数('項目名')"というような記述を<a>タグそれぞれに用意しなくてももっと簡単に切り替える方法を探しています
またメニュー内のページ(フォルダ)内にユーザが入っていた場合には、最初からマウスオーバーの状態になるようにしたいと考えています。
どのように記述すれば良いのでしょうか?よろしくお願いします。

回答の条件
  • 1人2回まで
  • 登録:2009/08/18 08:52:44
  • 終了:2009/08/25 08:55:02

回答(2件)

id:indiana No.1

indiana回答回数59ベストアンサー獲得回数32009/08/18 10:48:28

ポイント35pt

項目の画像はすべて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>
id:halohalolin

indianaさんありがとうございます。

このやり方を聞いたことはあるけれども思い出せず、上手く検索することもできなかったのですっきりしました。

参考にさせていただきます。

2009/08/18 12:42:24
id:i4ooon No.2

regnif回答回数56ベストアンサー獲得回数202009/08/19 10:47:51

ポイント35pt

便利な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)

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません