jQueryでふたつの動作をさせたいのですが？

2023/10/23 13:24

このQ&Aのポイント

jQueryでふたつの動作をさせたいのですが、適用のしかたがわかりません。
ページのトップに戻すと、マウスオーバーで画像を変更したいです。
詳しい方、教えてください。

ベストアンサー

jQueryでふたつの動作をさせたいのですが？

2012/04/15 06:26

jQueryでふたつの動作をさせたいのですが、適用のしかたがわかりません。詳しい方、教えてください。 ■その１：ページのトップに戻す http://iuser.jp/webjin/archives/2009/11/jquery-scroll-to-top-control.html この動作単独では動きました。 ■その2：マウスオーバーで画像を変更 http://www.webcreatorbox.com/tech/jquery-tips20/ その１で、プラグインのscrolltopcontrol.jsで指示する矢印画像：scrollup.gif に、その2のマウスオーバーをかけたいのです。その2のマウスオーバーは、<body>内に実存する画像に対応するようになっていて、 scrolltopcontrol.js内に書かれている画像に、指示すにはどうしたら良いのかわかりません。また、この方法ではできないのなら、「その１：ページのトップに戻す」を生かして、そのボタンにマウスオーバーをかける他の方法を教えてください。

YOKOHAMA-Boy
お礼率42% (23/54)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

kuzumiHK
ベストアンサー率72% (132/183)

2012/04/15 13:46 回答No.1

上記のふたつを使用する場合の回答です。 ※初期画像をhoge_off.png、ロールオーバー画像をhoge_on.pngとした場合まず、scrolltopcontrol.jsの画像名を下記のように変更します。 controlHTML: '<img src="hoge_off.png" style="width:XXpx; height:XXpx" /> 次に、scrolltopcontrol.jsよりも下の行に、 <script type="text/javascript"> $(function(){ $('#topcontrol').find('img').hover(function(){ $(this).attr('src', $(this).attr('src').replace('_off', '_on')); }, function(){ if (!$(this).hasClass('currentPage')) { $(this).attr('src', $(this).attr('src').replace('_on', '_off')); } }); }); </script> を追加します。以上です。

質問者

お礼 2012/04/16 20:30

ありがとうございます。テストHTMLで、きちんと動作しました。 scrolltopcontrol.jsとロールオーバーとも。ロールオーバーの記述を自分なりに、無い知識で再度理解できるようにします！重ねて、ありがとうございました。

その他の回答 (1)

tracer
ベストアンサー率41% (255/621)

2012/04/15 18:30 回答No.2

マウスオーバーに必ずしもjqueryを使わなければならないということはありません。 CSSの:hoverで十分対応可能だと思いますよ？

関連するQ&A

jQueryのプラグインについて
jQueryとプラグインのscrolltopcontrol.jsを使って、トップへ戻す操作をしています。 scrolltopcontrol.jsの操作ボタンは、img src、style　と　offsetx　offsety で、指定しますが、デファクトでは、右下になっています。画面サイズにかかわらずボタン位置を、左右は画面中央で、上下は画面下よりのピクセルで配置するには、どういう指示が良いのでしょうか？ぜひ、教えてください。よろしくお願いします。参考： http://iuser.jp/webjin/archives/2009/11/jquery-scroll-to-top-control.html 関係していると思われる部分： controlHTML: '<img src="image/scrollup.gif" style="width:84px; height:16px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:10, offsety:5}, //offset of control relative to right/ bottom of window corner 以上
- ベストアンサー
- JavaScript
jQuery、移動中に他スクリプトを無視したい
マウスオーバーで変化する画像が多数あるページに、jQueryを使ったTopへゆっくりスクロールしながら戻るボタンを設置しています。ボタンを押してスクロール中、マウスカーソルの下に、マウスオーバーで変化する画像がたまたま差しかかると、マウスオーバー動作が起きてしまい、一瞬、スクロールがひっかかるような、ぎこちない感じになります。キレイにスクロールさせたいのですが、スクロール中にマウスオーバーを無視するようなスクリプトってありますか？ tooltipみたいな動作も無視できたらうれしけれど。よろしくお願いいたします。（ボタンを画面の端に設置するのが安全策なんですが、デザイン上、使いたくないので、その方向は無視して下さい）
- 締切済み
- JavaScript
リンク先を変えたいのですが
scrolltopcontrol.jsのjQueryを使ってトップの位置に戻るページを作りましたがクリックした時のリンク先を変えたいのですがどこをどのように書き換えればよいのでしょうか http://から始まる任意のページにリンクするようにしたいのです（ページ内ではなく）どなたかお教えいただけますでしょうか何卒宜しくお願い致します -------------------- 以下のサイトを参考にして作業をしています【ページのトップに戻る】 http://iuser.jp/webjin/archives/2009/11/jquery-scroll-to-top-control.html 宜しくお願い致します
- 締切済み
- JavaScript
jQuery
http://blog.daichifive.com/archives/602 このページにあるようなスクロールをさせたいのですが、 jquery.scroller.d5.jsはページ内でダウンロードできますが、 jquery.jsはどこからダウンロードすればよいのですか？ jQueryeasysliderのjqueryjsをつかってみたのですが、上記サイトではjsファイルの最下部でスクロールさせたいものだけをカスタマイズできるとあるので、 easysliderのjqueryjsは使えないような気がします。初歩的な質問ですみません。あまり詳しくないです。宜しくお願いします。
- ベストアンサー
- CSS
twitterとjqueryのバッティングについて
はじめまして、jquery.showcase.jsとtwitterウィジットの件で質問させてください。 twitterウィジットとjquery.showcaseを同じHTML内で動作させたいのですが、 IE6～9とchromで見ると、大画像にマウスオーバーすると表示されるサムネイル（大画像にも）に、登録していない画像が２枚余分に表示されてしまいます。納期も近づいており大変困っております。正しい枚数ぶんだけ読み込ませたいのですが、どなたか助けていただけませんでしょうか？「サンプル」 http://www.im-data.co.jp/corporation/kimoto/hatena/ ちなみにjquery.showcaseに表示させたい画像は１枚～５枚。 IE6～9とchromでは、パス不明の<img/>がサムネイル、大画像ともに２枚追加されてしまいます。firefox3.6では正常に表示されます。宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
jQueryのバージョンが違うものを複数設置してもよいのでしょうか？
最近jQueryに興味を持ち、サイトで公開されているプラグインを試しています。複数のスクリプトを実行させるとエラーが起こるため原因を探っているのですが、jQueryを使ったサイトを研究していてふと疑問に思ったことがあります。とても初歩的な質問だと思うのですが、jQueryにはいろいろなバージョンがあるのでしょうか？jQuery 1.2.3や1.3.2などいくつか見たことがあります。それは単純に開発の段階で新しくバージョンアップされただけなのでしょうか？それとも全く別物なのでしょうか？それらの違うバージョンのjQuaryは共存することはできるのでしょうか？サーバーにいくつもアップロードして、ひとつのページで <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-1.2.3.min.js"></script> などと、しても良いかという意味です。また、共存できない場合、違うバージョンのjQuaryをダウンロードするように指示されている場合でも（プラグインの紹介サイト過去記事で表記が古い場合）、最新バージョンのｊQuaryをアップロードしておけば正常に動くものなのでしょうか？よろしくおねがいします。
- ベストアンサー
- JavaScript
JQueryが複数あると、挙動が変
JQueryでアクションをすると色々できるのですが、サンプルなどを追加していくと、それぞれ違うバージョンの jquery-***.jsを組み込むことになります。ひとつのページにjquery-***.jsが複数あると、挙動が正常にならないのですが、正常に動作させる方法はあるのでしょうか？
- ベストアンサー
- JavaScript
JQUERYのいくつかが順番によって機能しなくなり
JQUERYのいくつかが順番によって機能しなくなります。干渉を起こしているのかと思うのですが、どうすれば解決できるのでしょうか？var j = jQuery.noConflict();などをやってみましたが、知識不足でうまくいきませんでした。・top messageのみ動く。 var j = jQuery.noConflict();  <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> ・fontsizeとtop messageのみ動く。  <a href="#main" class="gotop"></a>  <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script>  <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script>  <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script>   <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> jQuery(function(){ jQuery("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script>  <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> 
- 締切済み
- JavaScript
jqueryアコーディオンのマウスオーバー
http://triplexxx.jp/archives/150で制作しましたが、現在クリックでアコーディオンします。 jqueryアコーディオンのマウスオーバー、マウスアウトでの開閉にしたいのですが、全く知識がありません。何処を修正したらいいか教えてください。
- ベストアンサー
- JavaScript
jQueryによる画像切替動作のカスタマイズ方法
こちら(http://blog.net-king.com/)でプラグインをダウンロードし、自分のWebページに設置させていただきました。 optionのところのautoPlayをfalse(自動切り替えしない)に変更し、こちら(http://okwave.jp/qa/q7571450.html)の質問・回答を参考にさせて頂き、各ページごとに、最初に表示される画像を変更・表示することが出来ました。今回質問させて頂きたいのは、メニューからマウスポインタが外れた時・メニューにマウスオーバーをしていない状態の時に、常に1つの画像を表示する方法です。メニュー1のページを開いた時に、最初からimg01が表示されている場合・・・メニューボタンの2にマウスオーバーをするとimg02の画像に切り替わり、メニューボタンからマウスポインタが外れると、再度 img01に切り替わるようなイメージです。このような動作をするよう、設定することは可能でしょうか。出来れば元の画像に切り替わる際もフェード効果があると嬉しいです・・・ jQuery初心者により、詳しく記述していただけると幸いです。お分かりになる方がいらっしゃいましたら、ご回答の程よろしくお願い致します。
- ベストアンサー
- JavaScript