人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: くじぇ
●カテゴリ:インターネット ウェブ制作
✍キーワード:GIF JavaScript jQuery タグ ダメ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● indiana
●35ポイント

項目の画像はすべて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>
◎質問者からの返答

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

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

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


2 ● regnif
●35ポイント

便利な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箇所を修正すれば問題ないはずです。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ