2011-07-15 15 views
0

私は、次のコードを持っている:これは基本的には、いくつかの親指を持ってIEでのCssの問題。 jQueryの画像/ SWFスワップ

   <html> 
       <head> 
       <script type="text/javascript" language="javascript" src="jquery/jquery-1.5.1.js"></script> 
       <script type="text/javascript" language="javascript" src="http://jquery.thewikies.com/swfobject/jquery.swfobject.1-1-1.min.js"></script> 
       <style> 
       div#test{background:#ffffff;width:360px;height:360px;display:none;z-index:5;position: fixed;} 
       #mainimage{z-index:-1;} 
       </style> 
       </head> 
       <body> 
       <table border="1"> 
        <tr> 
         <td><div id="test"></div> 
          <div id="mainimage"><img id="full_image" src="1.jpg" alt="0" width="360" height="360" border="0" /></div> 
          <span id="flash" style="width:360px;height:360px;border:0px;margin:0px;padding:0px;z-index:-1;"> 
          <object data="fireworks.swf" type="application/x-shockwave-flash" id="flash_99458582" width="360" height="360"> 
           <param name="movie" value="fireworks.swf"><param name="wmode" value="opaque"> 
          </object> 
          </span> 
         </td> 
         <td> 
          <table> 
           <tr> 
            <td><a href="1.jpg" class="thumbnail"><img src="1.jpg" width="70" height="70"></a></td> 
           </tr> 
           <tr> 
            <td><a href="2.jpg" class="thumbnail"><img src="2.jpg" width="70" height="70"></a></td> 
           </tr> 
           <tr> 
            <td><img src="3.jpg" width="70" height="70" class="video"></td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
       </table>  
       <br /><br /> 
       <script type="text/javascript"> 
       $(document).ready(function() { 
        $("#flash").hide(); 
        $('a.thumbnail').click(function(){ 
        var src = $(this).attr('href'); 

        $("#test").fadeIn("slow", function() { 
         //$("#test").fadeOut("slow"); 
         $("#flash").hide(); 
         $("#test").hide(); 
         $("img#full_image").show(); 
         $("img#full_image").css({ opacity: 0 }); 
         //alert(src); 
         if (src != $('img#full_image').attr('src').replace(/\?(.*)/,'')){ 
          $('img#full_image').attr('src', src+'?'+Math.floor(Math.random()*(10*100)));     
         } 

         $('img#full_image').stop().animate({opacity: '1'}, 'slow'); 
        }); 



        //alert("here"); 
        return false; 
        });  
        $('img.video').click(function(){ 
         $("img#full_image").fadeOut("slow", function() { 
          $("#test").show(); 
          $("#flash").show(); 
          $("img#full_image").hide(); 
          $("#test").fadeOut("slow"); 

         }); 
         return false; 

        }); 

       }); 
       </script> 
       </body> 
       </html> 

を、そしてあなたがそれをクリックしたときには、メイン画像として読み込まれます。クリックするとswfファイルを読み込むサムもあります。また、メイン画像/ swfがロードされたときにフェードイン/フェードアウトの効果があります。これはchromeとfirefoxで動作しますが、IEで試してみると、jqueryによって読み込まれたdivが内容を下に押し出します。誰もがこれをデバッグするのを助けることができる?

おかげ

+0

オーバーレイ(divまたは画像)は絶対/固定の位置にする必要があります。 onclickに表示される画像タグは表示されません。あなたのテスト部門は期待どおりに働いていますか? – Jay

答えて

0

あなたはDOCTYPEを持っていないので、あなたのページには、Quirks Modeを使用しています。

非常に最初の行として、HTML5のDOCTYPE追加:

<!DOCTYPE html> 

を私は実際にこれがあなたの問題を修正するかどうかを確認するためにテストしていないが、チャンスは良いです。

たとえば、position: fixedを使用していますが、これはIEのクワークモードでは機能しません。

+0

OMG !!!私はこれを知らなかった。笑。 ありがとう、確かに何か新しい毎日を学ぶ!!!! これで問題は解決しました。 – Dino