プロが教えるわが家の防犯対策術！

jQueryでのロールオーバー処理

解決済

  • 質問者：adober
  • 質問日時：
  • 回答数：4件

jQueryでのロールオーバ、クリック処理について質問です。

画像ファイルを「_on」、「_off」で識別することでオンオフの切り替えができるjQueryがあります。
（参考：http://neet-navi.info/wordpress/431/）
が、これを使った場合、現在開いているページは「_on」の画像のままにしたい際にうまく処理できませんでした。
（参考：http://www.kaerumushi.jp/index.html
　※こちらのサイトの下部のナビゲーションのようにしたいです。
　　上記サイトはリンクが画像ではありませんが、やりたいことは同じです）

参考となるサイトも見つけられなかったため、こちらで質問しました。
どなたかご回答いただけると幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

とっても簡単なサンプルを作ってみました。


　こんなにシンプルで簡単にできることをjquey使うこと無いと思う。WindowsXP/IE7以前はほとんどないし
適当なフォルダーを作って下記ファイルをすべて同階層に入れる。
index.html　book.html　manual.html　styleSheet.css
★<head>内の一部、<div class="nav"></div>内、<div class="footer"></div>内は共通なのでコピペする
　(注意)実際には、SSIなどを使用する。その場合すべての他のファイルへのパスは絶対配置にする。
　そのほうが階層を一切考えないで済むので製作は楽です。今回はサーバー経由しないので相対パス・同階層にしてある。

★javascriptは使用していませんから、印刷やテキストブラウザ、検索エンジン、携帯電話もOK
　もちろん、スマホも幅広ディスプレイも・・。印刷プレビューやスタイルシートな詩で確認
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　でチェック済みHTML4.01strict + CSS2.1
★サブディレクトリへのリンクもあるが今回は省略
★背景画像の置換は省略しています。

※タブは＿に置換してあるので戻す。

[index.html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>トップ</title>
<!-- 以下共通 -->
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<link rel="styleSheet" media="screen" href="./stylesheet.css">
<!-- ここまで共通 -->
＿<style type="text/css" media="screen">
<!--
div.header div.nav ol li a[href="./index.html"]{background-color:fuchsia;}
div.section div.nav ol li a[href="./index.html"]:after{content:"　←今ここ!";}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>ようこそ</h1>
＿＿<div class="nav"><!-- ここから -->
＿＿＿<ol>
＿＿＿＿<li><a href="./index.html">Top</a></li>
＿＿＿＿<li><a href="./book.html">著書</a>
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li><a href="./book/1.html">本1</a></li>
＿＿＿＿＿＿<li><a href="./book/2.html">本2</a></li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿＿<li><a href="./manual.html">マニュアル</a>
＿＿＿＿＿<ol>
＿＿＿＿＿＿<li><a href="./manual/1.html">マニュアル1</a></li>
＿＿＿＿＿＿<li><a href="./manual/2.html">マニュアル2</a></li>
＿＿＿＿＿</ol>
＿＿＿＿</li>
＿＿＿</ol>
＿＿</div><!-- ここまでは共通 -->
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="nav">
＿＿<!-- 共通に付き省略 -->
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>


[book.html]
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>著書</title>
<!-- この間共通 -->
＿<style type="text/css" media="screen">
<!--
div.header div.nav ol li a[href="./book.html"]{background-color:fuchsia;}
div.section div.nav ol li a[href="./book.html"]+ol{display:block;}
div.section div.nav ol li a[href="./book.html"]:after{content:"　←今ここ!";}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>著書</h1>
＿＿<div class="nav">
＿＿＿<!-- 共通に付き省略 -->
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="nav">
＿＿＿<!-- 共通に付き省略 -->
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<!-- footer共通に付き省略 -->>
＿</div>
</body>
</html>

[manual.html]
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>マニュアル</title>
<!-- この間共通 -->
＿<style type="text/css">
<!--
div.header div.nav ol li a[href="./manual.html"]{background-color:fuchsia;}
div.section div.nav ol li a[href="./manual.html"]+ol{display:block;}
div.section div.nav ol li a[href="./manual.html"]:after{content:"　←今ここ!";}
-->
＿</style>
＿<style type="text/css" media="screen">
<!--
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>マニュアル</h1>
＿＿<div class="nav">
＿＿<!-- 共通に付き省略 -->>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>ここに本文記事</p>
＿＿<div class="nav">
＿＿＿<!-- 共通に付き省略 -->>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<!-- footer共通に付き省略 -->>
＿</div>
</body>
</html>

[styleSheet.css]
@charset "Shift_JIS";
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:80%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;position:relative;}
div.nav{line-height:30px;text-align:center;}
div.nav ol,div.nav ol li{list-style:none;margin:0;padding:
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼が遅くなり申し訳ございません。
詳細な手順・コードをありがとうございます。
大変勉強になりました。

CSSについては、今後もっと掘り下げて学習していきたいと思います。
また不明点が出てきた際は質問させていただくと思いますが
どうぞよろしくお願いいたします。

通報する
お礼日時：2014/04/25 12:05

No.3

  • 回答者： balloon23
  • 回答日時：

ちょっと面白そうなので失礼します。


先に回答だけ。
No2の方の回答推奨ですが、最初の質問のJqueryで簡単にやる場合。
--------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
path = location.pathname

jQuery.event.add(window,"load",function(){
$('#nav a')
.each(function(){ //IDがnavの中のaタグをひとつめ、ふたつめと順番に見ていく
var url = $(this).attr("href"); //今の順番のaタグのリンク先を見る
if( url == path ) { //開いているページのURLと等しい場合に
$(this).parent().addClass('point_defo'); //クラスを付与
}
})
.hover( //ホバー時の動作
function(){ //ホバーしたときに
$(this).parent().addClass('point'); //クラスを付与
},
function(){ //マウスを外したら
$(this).parent().removeClass('point'); //クラスを削除
}
);


})();
</script>


<style>
* {margin:0;padding:0;line-height:1;}

/*デフォルトのli*/
li {
display:inline;
float:left;
}

/*ホバー時ののli*/
li.point {
}

/*デフォルトのliのリンク*/
li a {
display:block;
width:80px;
height:60px;
color:#333;
background-color:#ffffff; /*ここを画像にすると切り替わります*/

text-align:center;
line-height:60px;
}

/*ホバー時、もしくは今見ているページと同じリンク先の場合*/
li.point a,
li.point_defo a {
color:#fff;
background-color:#000000; /*ここを画像にすると切り替わります*/
}

</style>
</head>
<body>
<ul id="nav">
<li><a href="/">hoge</a></li>
<li><a href="/#hoge2">hoge2</a></li>
<li><a href="/#hoge3">hoge3</a></li>
</ul>
</body>
</html>

--------------------------------------------------------------

本来は色んなリファレンスなりを見ながら正しい書き方を覚えて、かつそれぞれのブラウザにあった対応策を学びながら書いていくのでしょうが、現状なかなか難しいものです。作業の短縮につながるので自分はテンプレでjquery使います。
　
ただ、jqueryだって結構な容量ありますし、先述の方の言う通りjsをOFFにして回るような方も中にはいたりいなかったり（見せたい客層によりますが。）
なので、本来であれば、本来であれば
「htmlの書き方やcssの工夫 → ネイティヴjavascriptでの力技 → jqueryの利用」という優先順になると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

詳細なスクリプトをありがとうございます。
試してみようと思ったのですが、background-colorの「ここを画像にする」というところで躓いております。
もうちょっと色々と試してみたいと思います。

処理自体はNo1へのお礼で書いたように、jQueryの実行範囲を変更することで実装できたのですが、上記のようなやり方もあり、おそらくこれ以外にもやり方はあり、どれがベストなやり方なのか判断が難しいですね。
あまり時間は取れないかもですが、おっしゃっているようにHTML・CSSの勉強をしてからスクリプトを学ぶのが良さそうな気がしますので、これから勉強していきたいと思います。
アドバイスありがとうございました。

通報する
お礼日時：2014/04/22 10:01

No.2

  • 回答者： ORUKA1951
  • 回答日時：

＞その場合の質問ですが、調べている際に「hoverの動作自体はCSSでも可能だが、タイムラグが発生することもあるため、一般的にはjQueryが使われている」ということが書かれているサイトもありました。



　これは原因はわかっています。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　javascriptを利用できないユーザーエージェントもいる。そのため、画像自体がコンテンツの主要な要素でない場合は、HTMLではなくスタイルシートで背景や画像を読み込ませます。

　それは結果的に必要なときに改めてサーバーに画像を要求するために生じるタイムラグです。ところが、ボタンのようにデータ量の小さい時にイライラを発生させることになります。
【解決方法】
　いわゆる「スプライト」という手法を使用します。事前に画像を読み込ませておいてずらしていきます。これで、タイムラグはなくなります。javascript以上にタイムラグはなくなります。

＞あまり推奨されていないやり方（CSSで実現できるならなるべくCSSで実装する）ならば、これほどまでに上記のjQueryが使用されているのはなぜでしょうか。
　ブラウザのCSS2.1やCSS3への対応が、特にIEの対応が遅れていたからです。
　jQueryは、あくまで補助手段---より見栄えをよくするための補助手段---。ウェブの利用しやすさのために使われているとは言えないサイトが多いのです。
　あなた自身も、ネットで情報を得ようとした時に、派手な見栄えのあるサイト--関心はするでしょうが、それは製作者の立場であるからで、あなたが公開している文書に必要なのですか？？？
　外見ではなく、内容の充実してないとブックマークしないでしょう。

源質問
＞現在開いているページは「_on」の画像のままにしたい際に
　わかりやすいのは、リンクにクラスを指定しておいて、そのページの<head>内に、簡単なスタイルシートを書いておく。
classの場合
HTML
<div class="footer">
　<p><a href="/" class="goTop">Top</a> | <a href="/books" class="goBook">著書</a> | <a href="/support" class="goSupport">サポート</a></p>

div.footer p.nav{text-align:center;line-height:20px;}
div.footer p.nav a{display:inline-block;width:80px;height:20px;overflow:hidden;background:url() 0 0;}
div.footer p.nav a.goBook{background-position:0 100px;}
div.footer p.nav a.goBook:hover{background-position:40px 100px;}

・・・bookにあるHTMLでは
・・・・・
div.footer p.nav a.goBook{background-position:40px 100px;}
とだけ書いておけば良い。

属性セレクタの場合
HTML
<div class="footer">
　<p><a href="/">Top</a> | <a href="/books">著書</a> | <a href="/support">サポート</a></p>

div.footer p.nav{text-align:center;line-height:20px;}
div.footer p.nav a{display:inline-block;width:80px;height:20px;overflow:hidden;background:url() 0 0;}
div.footer p.nav a[href="/books"]{background-position:0 100px;}
div.footer p.nav a[href="/books"]k:hover{background-position:40px 100px;}

・・・bookにあるHTMLでは
・・・・・
div.footer p.nav a[href="books"]{background-position:40px 100px;}
とだけ書いておけば良い。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご丁寧にありがとうございます。
画像をスプライトさせるやり方自体は別のサイトで見かけたことがあります。
なのですが、今回は事前に用意されていた画像が別ファイルになっている2枚の画像だったので、画像を入れ替える処理にしたいと思っていました。（画像加工をすればいいという話になりそうですが）

もちろん、サイトの見栄えより中身が大事ということは理解しています。
今回はユーザーが開いているページがどこのページなのかをわかりやすくさせるため、ナビゲーションとして上記のような処理をさせたいと思っていました。そういう意味で今回は必要な要素でした。

javascriptを利用できない・利用しないユーザーがいるということを意識して、CSSでできるだけ実装することが大切だということはわかりました。
CSSはあくまでレイアウトでしか使用していなかったので、これから勉強してみたいと思います。
貴重なアドバイス、ありがとうございました。

通報する
お礼日時：2014/04/22 09:27

No.1

  • 回答者： ORUKA1951
  • 回答日時：

あくまで望ましくない手法であることはわかってらっしゃいますか？


【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/357 … )］より

　:hoverの動作ですから、CSSで実現できることをjQuery--javascripで行う意味はありません。

　リンク先のページでは、単純にスタイルシートで要素セレクタで切り替えればよいだけですよ。

この回答への補足

早速のご回答ありがとうございます。
当方Webデザインの勉強を始めたばかりの初心者のため、いくつか質問させてください。

「望ましくない」とおっしゃっているのは、スクリプトをやたら使うことが望ましくない、ということでしょうか。
その場合の質問ですが、調べている際に「hoverの動作自体はCSSでも可能だが、タイムラグが発生することもあるため、一般的にはjQueryが使われている」ということが書かれているサイトもありました。
あまり推奨されていないやり方（CSSで実現できるならなるべくCSSで実装する）ならば、これほどまでに上記のjQueryが使用されているのはなぜでしょうか。

なんとなくですが、現在表示されているページ情報を取得して、その場合のみ「_on」を表示させる、もしくはスクリプトを無効にする、とやればいいのでは、というところまで理解しているのですが、実際にスクリプトに書き起こすことができずに止まっている状態です。
当方の力不足ということは痛感しておりますが、参考となるページやスクリプトがあれば教えていただけるとありがたいです。

補足日時：2014/04/21 15:34
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

自己解決しました。
jQueryの実行範囲を変更することで処理自体は正常に動くようになりました。

ですが、今後の成長のため、上記の質問につきましてご回答いただければ幸いです。

通報する
お礼日時：2014/04/21 16:29

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報