- ベストアンサー
xmlとロールオーバー（jQuery1.52）
以下方法使ってロールオーバーを敷いたのですが、 http://www.finefinefine.jp/web/kiji1359/ ページの一部の情報でxmlから読み込み、形成している箇所があって、そこのimgは全くロールオーバーされません。 一応JSの読み込み順で一番最後にロールオーバーはおいたのですが、これはどうしてでしょうか。 よろしくお願いします。
- picicate
- お礼率58% (101/172)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 #1にも書きましたが、live()は存在は知っていますが使ったことがないのでよくわかっていません。 また、fixPng()もどのようなものかわかっていませんし、質問者様がどのようなソースの構成で処理しようとしているのかも不明なので、勝手な推測で以下を書いています。 ＜勝手な想定＞ 1. img要素のoacityを直接操作しているようですが（それでfixPng()が必要と仮定）、親のリンク要素の透明度を操作するようにしてみた。 （リンク要素でまずい場合は、img要素に変更すれば元と同じ） 2. live()はわからないし#1の回答の2）の方式のほうが簡単なので、2）の方式にしています。 3. イベントはmouseoutしか設定していないので、bodyがmargin:0だとミスする場合があります。 （その場合は別の対処が必要。デフォルトmarginがあれば以下のサンプルでも充分かと） （確実に行う場合は、mouseoverも設定すればいけるはず） 4. 対象とする画像はa.roverの子要素のようですが、とりあえず直下の要素（a.rover>img）のみに限定 ＊ サンプルは確認しやすさのため、透明度0.7を0.3に変えています。 ＊ ajaxのテストはしていませんが、2）の方式なので問題はないはず。 というわけで、以下、参考になるかならないかわからないサンプルですけれど… ＜想像に基づいたサンプル＞ （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- img { width:250px; height:120px; } //--> </style> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript"> <!-- (function(setOpacity){ $(document).mouseout(function(evt){ var t = evt.target || evt.srcElement; var r = evt.relatedTarget || evt.toElement; setOpacity(t, 1); if(r) setOpacity(r, 0.3); }); })(function(node, opacity){ var n = $(node.parentNode); if (node.nodeName=="IMG" && n.hasClass("rover")) n.stop().fadeTo(500, opacity); }); //--> </script> </head> <body> <div> <a class="rover"> 画像2個連動： <img src="img/photo01.jpg" alt=""> <img src="img/photo02.jpg" alt=""> </a> </div> <div> <a class="rover hoge"> 画像1個単独： <img src="img/photo03.jpg" alt=""> </a> 対象外： <img src="img/photo04.jpg" alt=""> </div> <div> <a> 対象外： <img src="img/photo05.jpg" alt=""> </a> </div> <div> <a class="rover"> 画像2個連続： <img src="img/photo06.jpg" alt=""> <img src="img/photo07.jpg" alt=""> </a> </div> </body> </html>
その他の回答 (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で読み込んだ箇所がどういうわけか、薄くなるどころかポイントしてる間に徐々に濃く（離しても濃いまま）なっていくようなのですが…かきかたが変なのでしょうか？
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ご丁寧にありがとうございました！ 結局liveイベントは必須のようでご提示いただいた方法そのままではきちんと反応してくれなかったのですが、イベントタイプ判定という頭がなかったので参考になりました。