- ベストアンサー
xmlとロールオーバー（jQuery1.52）
以下方法使ってロールオーバーを敷いたのですが、 http://www.finefinefine.jp/web/kiji1359/ ページの一部の情報でxmlから読み込み、形成している箇所があって、そこのimgは全くロールオーバーされません。 一応JSの読み込み順で一番最後にロールオーバーはおいたのですが、これはどうしてでしょうか。 よろしくお願いします。
- picicate
- お礼率58% (101/172)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
＞ページの一部の情報でxmlから読み込み、形成している箇所があって、 ＞そこのimgは全くロールオーバーされません。 想像するところ、ajaxなどで情報を読込んでいるのではないでしょうか？ そうだとすると… ＞一番最後にロールオーバーはおいたのですが、これはどうしてでしょうか。 一番最後の実行順にしても、「非同期通信」なので、ロールオーバーのイベントをセットする処理を実行するタイミングでは、まだxmlの読込みがなされていない可能性が高いと思われます。 それなので、その時点で存在しないimgに対してはイベント（＝ロールオーバー）が設定されていないのだと推測しますが？ 対策としては、以下のいずれかかと思います。 1） ajaxのコールバックでimgを形成したら、その要素にもロールオーバーを設定する。 あるいは、全ての読込みが終了してから、ロールオーバー設定の処理が 走るようにする。 2） 個々のimgにイベントを設定せずに、documentなどに設定しておいて、都度、 イベントの発生要素をチェックして実行するような仕組みとする。 （この方法なら、後から動的に要素を追加・削除しても問題なく動作する） 3） 参考サイトのものはjQueryを利用しているようですが、イベントの設定に確か 「live」があったと思いますので、そちらを利用すれば2）と同様の効果を得ること が可能だと思います。（←動作を確認していませんので、曖昧な記憶です）
補足
ご回答ありがとうございました。おっしゃるとおりajaxで読み込んで、の方法です。 （3）でやってみたところ、かなりの箇所で解決したのですが、問題もあるようで； 以下で全て動くようにはなったんですが、 $("a.rover").live("mouseover", function(){ if(! $.support.opacity){ $(this).children("img").fixPng().css("opacity","0.7"); }else{ $(this).fadeTo(1,0.7); } }).live("mouseout", function(){ if(! $.support.opacity){ $(this).children("img").fixPng().css("opacity","1.0"); }else{ $(this).fadeTo(1,1.0); } }); ※fixPngは別ライブラリ。透過Png対策。 IE7-8でXMLで読み込んだ箇所がどういうわけか、薄くなるどころかポイントしてる間に徐々に濃く（離しても濃いまま）なっていくようなのですが…かきかたが変なのでしょうか？
関連するQ&A
- jQueryを使ったロールオーバーについて
初めまして。Webサイト作成の初心者です。 JQueryを使って、フェードエフェクト効果のあるロールオーバーを作成したいと思っております。 例えば次のサイトでは、若干フェードエフェクト効果のあるロールオーバーとなっておりますが、ソースを見るとbody内にはオフマウス用の画像だけが記されております。 http://mizuame.sakura.ne.jp/jquery.tgImageRollover/demo/script2.html オンマウス用の画像への切り替えはCSSで行っているのでしょうか？ ちなみに、グローバルメニューなどでは、オフマウス用とオンマウス用の画像を一つにし、CSSで座標を調整することで、ロールオーバーをすることが多いと思いますが、この方法だとJQueryを使ってロールオーバーにフェードエフェクト効果を付けることはできないのでしょうか？ それとも、やはりロールオーバーにフェードエフェクト効果を付けるには、オフマウス用の画像とオンマウス用の画像を、それぞれ用意し、オフマウス用の画像はHTMLに記述し、オンマウス用の画像はCSSに記述するのでしょうか？ どのような回答でもお受けしたい所存で御座いますので、どうか宜しくお願い致します！！
- ベストアンサー
- JavaScript
- jQuery、画像を2箇所同時にロールオーバー
こんばんは。お世話になります。 jQueryを使ったJSについての質問です。 div.colにカーソルを合わせた時に、div内の画像2つを 同時にそれぞれロールオーバーさせたいです。 <div class="col"> <img src="image01.jpg"> <img src="image02.jpg"> </div> <div class="col"> <img src="image03.jpg"> <img src="image04.jpg"> </div> ・ ・ ・ オンマウス用の画像は、 image01.jpg→image01_on.jpg image02.jpg→image02_on.jpg という風に、すべて統一で「_on」を付けてあります。 画像自体をオンマウスするとロールオーバーするJSはよく見るのですが、 それらを格納しているdivをオンマウスした時に画像をロールオーバーさせる方法を 見つけられませんでした。 何か解決策がありましたら、お力をお貸しいただきたいです。 お手数ではありますが、何卒よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jqueryのロールオーバーについて
jqueryのロールオーバー設定に関してご質問です。 あるサイトのコーディングを行ってます。 サイト内のナビーゲーションボタンを瓶の画像でまとめてます。 各瓶の画像にリンクを付け、 マウスを乗せるとその瓶が開いた画像が 切り替わりでフェードインの感じで出てくるという設定を目指しているのですが、 うまくいきません。 色々やった結果マウスを当てると、 切り替わりで空いた瓶がフェードで出るのですが、 その画像奥に閉じた瓶がそのまま残ってて重なってる感じです。 こちらはどのようにすれば上手く画像奥の瓶は消えるのでしょうか？ ちなみに画像はpngです。 フェードの切り替わりは是非そのまま使用したいと考えてます。 あとマウスを外せばまた閉じた瓶がフェードで出るという感じを目指してます。 どなたかご教示いただいてもよろしいでしょうか？ 一応下記htmlとjsコードも載せておきます。 ▼html <script src="../lib/jquery1.8.1.min.js"></script> <script src="../js/jquery.tgImageRollover.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgImageRollover({ selector : 'img.rollover', // セレクタ ←(7) attach : '_on', // ファイル名末尾句 ←(8) onFadeTime : 600, // カーソルON時のアニメーション時間 ←(9) offFadeTime : 400 // カーソルOFF時のアニメーション時間 ←(10) }); }); </script> <a href="#"><img class="rollover" src="../img/nav01.png" alt="" width="100" height="50"></a> <a href="#"><img class="rollover" src="../img/nav02.png" alt="" width="100" height="50"></a> ▼jquery.tgImageRollover.js ;(function($){ $.fn.tgImageRollover = function(options){ var opts = $.extend({}, $.fn.tgImageRollover.defaults, options); $(opts.selector).each( function(){ this.onImage = $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1"+ opts.attach +"$2"); this.onHtml = $('<img src="'+this.onImage+'" alt="" style="position:absolute; opacity:0;">'); $(this).before(this.onHtml); $(this.onHtml).hover( function(){ $(this).stop().animate({'opacity': '1'}, opts.onFadeTime); }, function(){ $(this).stop().animate({'opacity': '0'}, opts.offFadeTime); } ) } ) } // default option $.fn.tgImageRollover.defaults = { selector : 'img.rollover', attach : '_on', onFadeTime : 600, offFadeTime : 400, }; })(jQuery);
- 締切済み
- JavaScript
- yuga.jsを使うとロールオーバー画像が表示されない
お世話になっております。質問させてください。 現在メニューの画像をyuga.jsに入っていないスクリプトで ロールオーバーさせているのですが、 ある1ページにだけ yuga.js関係のスクリプトを使用した所、 そのページのメニュータイトル画像だけが 表示されなくなってしまいました。 （マウスを載せるとロールオーバー後の画像は出てくるのですが） http://www.geocities.jp/meguri_mizu/test/pc/2008.html ↑こんな感じです…。左上の「役に立つパソコン」の部分です。 firefoxだとずっとマウスオーバーした時の画像が表示されたままになってしまいます。 yuga.jsでできる、名前に_onをつけてのロールオーバーにしても やっぱり自ページのメニューだけがうまく表示されません。 なぜなのでしょうか…？ スクリプトが読めないのでどう直していいのか全然わかりません；； よろしければご教授ください。お願いします…。
- ベストアンサー
- JavaScript
- ビルダー９でロールオーバー作成
現在ビルダー９でロールオーバーのリンクボタンを作っています。ウェブアートデザイナーを開いてウェブアート素材タブのなかから画像を選びましたが、オブジェクトの選択で、画像だけ（あるいは文字だけ）が選択されてしまい、ロールオーバーが作れません。 説明わかりづらいですか？つまり、画像のみ（文字のみ）のロールオーバーになってしまうということです。画像＋文字を選択するにはどうしたらいいですか？
- ベストアンサー
- ホームページ作成ソフト
- Dreamweaver 8でロールオーバーができない
はじめまして、WEBの勉強をしているものです、わからないことだらけで、どうかご伝授ください。 今、 Dreamweaver 8でWEBサイトを作っているのですが、困ったことが起こりました。それは、ロールオーバー機能ができないということです。操作は間違っていないのです。 パソコンは、知人に頼んで自作パソコンを作ってもらいました。その自作パソコンでやるとロールオーバー機能ができないのです。 他のパソコンでやるとちゃんとできるのですが・・・ 素材すべて同じものを使っています。 操作も同じで、自作のほうは、ぜんぜん反応しないのですが、ほかのパソコンだとちゃんとロールオーバーできます。 こんなことってあるのでしょうか？私には何が悪いのかわかりません。 あいにく作ってくれた知人も連絡が取れないので、どうすることもできない状態です。ほかのパソコンは、メモリが少なくすぐに止まってしまうので、こちらでは、難しいのです。 どなたたか、助けてください。
- 締切済み
- ホームページ作成ソフト
- ページによってロールオーバーが機能しない
javascriptを使用して、カーソルがあたった時に色が変わる ロールオーバーを実現しているサイトを作りました。 ところが、ページによってロールオーバーが機能しません。 すべて同じソースをコピペしただけなのですがこれが原因ですか？ サイトは複数ページあり、機能するものとそうでないもので 置かれている階層が異なるものもあります。 他のjavascriptも記述されているのですが、それらが影響しているのでしょうか？ ちなみに下記のようなソースです。(一部抜粋) 【HTML】 <div id="a"> <a href=""> <img src="test.png" /> </a> <ul> <li> <a href="00.html"><img src="test2.png" class="rollover" /></a> </li> </ul> </div> 【javascript】 $.fn.rollover = function() { return this.each(function() { // 画像名を取得 var src = $(this).attr('src'); //すでに画像名に「_on.」が付いていた場合、ロールオーバー処理をしない if (src.match('_on.')) return; // ロールオーバー用の画像名を取得（_onを付加） var src_on = src.replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"); // 画像のプリロード（先読み込み） $('').attr('src', src_on); // ロールオーバー処理 $(this).hover( function() { $(this).attr('src', src_on); }, function() { $(this).attr('src', src); } ); }); }; // 画像をロールオーバーする箇所を指定 $(function() { $('.rollover').rollover(); }); $(document).ready(function(){ $('.bxslider').bxSlider(); }); ご存知の方がいらっしゃいましたら対策を教えてください。 お願いいたします！
- 締切済み
- JavaScript
- 画像のロールオーバーがずれてしまいます。（CSS）
テーブルを作り、tdタグの一箇所の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にtd内にあるimg要素にvisibility:hidden;にするというロールオーバーを作りたいと思っています。 しかし実際に作ってブラウザで見てみると、ロールオーバー後の画像 （背景として設定しているもの）が微妙に１pxほど斜め下にずれて表示されてしまいます。 このような事を防ぐためにはどんな事に気を付ければ良いでしょうか？ ちなみに、ロールオーバー前の画像とロールオーバー後の画像２枚を 全く同じサイズにしています。 参考までにタグを下記に記述していますので、どなたか見て頂けませんでしょうか。宜しくお願いいたします。 -------------------------------------------------CSS td.1{ background:url(image01.jpg) no-repeat; } td.1 a{ display:block; } td.1 a:hover{ background-color:transparent; } td.1 a:hover img{ visibility:hidden; } -------------------------------------------------HTML <table> <tr> <td class="1"> ←このtd内の画像 <a href="top.html"><img src="image01.jpg"></a> </td> <td> <a href="top02.html"><img src="image02.jpg"></a> </td> <td> <a href="top03.html"><img src="image03.jpg"></a> </td> </tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- cssとjavascriptを使って画像の一部をロールオーバー
以下の条件でロールオーバーをさせることが可能かどうか、また可能な場合はどのようにしてやるのか教えていただきたいです。 (1)1枚のgif画像がある。画像内にいくつか文字があり、文字の上にカーソルが上がった時に文字の色を変えたい。 (2)文字がすべてロールオーバーしていない元画像と、文字がすべてロールオーバーした画像の2枚を用意。 (3)CSSとjavascriptを駆使して作りたい。 元画像を背景に設定し、その上にロールオーバー後の画像を配置し、隠す。→文字の上にカーソルが来たら、隠していたロールオーバー後の画像の一部をその同じ場所に表示させる というような考え方でやってみたのですが、どうもうまくいきませんでした。Flashでやった方が簡単なのですが、Flashは使わずに作るということになっているので困っています。 何卒、よろしくお願いいたします。
- ベストアンサー
- HTML
- javascriptを使って画像のランダム表示とロールオーバーをセット
javascriptを使って画像のランダム表示とロールオーバーをセットで行いたいのですが上手くいきません… javascript超初心者です…。画像をランダムに表示し、さらにそのランダムに表示された画像をそれぞれ違った画像にロールオーバーさせたいのですが上手くいきません。 一応以下のように書いて試しているのですが、ランダム表示はするのですが、ロールオーバーはエラーがでてしまい画像が切り替わりません。どのようにすれば上手く出来るか、知恵を貸してください。宜しくお願いします。 <html> <body> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); onMouseover = new Array(); onMouseout = new Array(); // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "top1.gif"; img[1] = "top2.gif"; img[2] = "top3.gif"; img[3] = "top4.gif"; img[4] = "top6.gif"; // マウスオーバー onMouseover[0] = "top1roll.gif"; onMouseover[1] = "top2roll.gif"; onMouseover[2] = "top3roll.gif"; onMouseover[3] = "top4roll.gif"; onMouseover[4] = "top6roll.gif"; // マウスアウト onMouseout[0] = "top1.gif"; onMouseout[1] = "top2.gif"; onMouseout[2] = "top3.gif"; onMouseout[3] = "top4.gif"; onMouseout[4] = "top6.gif"; n = Math.floor(Math.random()*5); document.write("<img src='"+img[n]+"' border='0' onMouseover='"+onMouseover[n]+"' onMouseout='"+onMouseout[n]+"'>"); //--> </SCRIPT> </body> </html> 補足 ●ランダム用の画像が1～5まで、ロールオーバー用の画像がa～eまであるとして、ランダム表示によって1が表示されたらロールオーバーで表示される画像はaのみ、マウスアウトしたら１に戻る、というようにしたいです。同じように2-b,3-c…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。
- 締切済み
- JavaScript
お礼
ご丁寧にありがとうございました！ 結局liveイベントは必須のようでご提示いただいた方法そのままではきちんと反応してくれなかったのですが、イベントタイプ判定という頭がなかったので参考になりました。