圖片在Chrome和IE中消失

我從來沒有使用過jQuery，所以我要求一個朋友幫助我處理一些我正在處理的小項目，當您將鼠標懸停在按鈕上時，我想要加載不同的圖片，並且您可以看到適用於our site。它在FF和Opera下運行良好，我也在Chrome中進行了測試，但是當我從本地機器嘗試它時效果很好，但只要將它放到服務器上，Chrome和IE中的圖片就會消失更改按鈕。這裏是我使用的代碼：圖片在Chrome和IE中消失

<div id="wraper"> 
    <div id="nav"> 
     <div id="left"> 
      <script> 
       $(document).ready(function() { 
        $('#left').hover(
         function(){ 
          $('#nav').css({'background-image' : 'url(img/serbia.png)'}); 
         }, 
         function(){ 
          $('#nav').css({"backgroundImage" : "url(img/inactivebutton.png)"}); 
         } 
        ); 
       }); 

       $(document).ready(function() { 
        $('#right').hover(
         function(){ 
          $('#nav').css({'background-image' : 'url(img/english.png)'}); 
         }, 
         function(){ 
          $('#nav').css({"backgroundImage" : "url(img/inactivebutton.png)"}); 
         } 
        ); 
       }); 
      </script> 
      <a href="index_sr.html" ></a> 
     </div> 

     <div id="right"> 
      <a href="index_en.html" ></a> 
     </div> 
    </div> 
</div>

任何人都可以指出我做錯了什麼？

感謝

來源

2012-03-07 Lord of Blood

服務器錯誤日誌中有什麼？ – stark 2012-03-07 12:08:43

您正在使用的CSS功能怪異......

看這裏：http://api.jquery.com/css/

因此改變了這種方式：

$('#nav').css('background-image','url(img/serbia.png)');

等

來源

2012-03-07 12:08:51

當我說，dw說有代碼錯誤，它的劑量工作在所有 – 2012-03-07 13:51:17

你的圖片必須加載，所以當你滾動它們時，是一個小的'毛刺'，圖像加載。

嘗試預加載圖片，如下解釋：http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

E：至少，那我是如何解釋你的問題。當你說他們'消失'時，你的意思是永久性的嗎？

來源

2012-03-07 12:09:51

nope，你會請http://studiospartacus.com/index1。HTML與鉻或ie，你會看到什麼即時通訊談論 – 2012-03-07 13:48:19

我也試圖改變backgroundImage背景圖像，它仍然工作時，我在本地測試它，但很快我在服務器上測試它的越野車，圖片所有的時間加載時，當你更換按鈕 – 2012-03-07 14:00:56

這是與它需要每次重新加載。因爲JavaScript不是即時的，所以交換圖像需要時間。嘗試使用CSS來交換，而不是JS。 – 2012-03-07 14:24:54

這不是Jquery的問題。這是很自然的過程，因爲當你通過鏈接hover然後它發送一個新的其他HTTPS請求到服務器。這很好，如果你使用css sprite這個圖像。

閱讀這篇文章，這http://css-tricks.com/css-sprites/

來源

2012-03-07 12:10:11 sandeep

Separt的圖片作爲

leftActiveHelmet.png ----留下頭盔
rightActiveHelmet.png ----右頭盔
inactiveHelmet .png ---不活動頭盔
inactivebutton.png ---無效按鈕
leftActivebutton.png --active左鍵

rightActivebutton.png ---積極右鍵

<script> 

    $(document).ready(function() { 
    $('#left').hover(

    function(){ 
    $('#logo').css({"backgroundImage" : "url(img/leftActiveHelmet.png)"}); 
    $('#left').css({'background-image' : 'url(img/leftActivebutton.png)'}); 
    }, 
    function(){ 
    $('#logo').css({"backgroundImage" : "url(img/inactiveHelmet.png)"}); 
    $('#left').css({'background-image' : 'url(img/inactivebutton.png)'}); 
    } 
    ); 

    $('#right').hover(
    function(){ 
    $('#logo').css({"backgroundImage" : "url(img/rightActiveHelmet.png)"}); 
    $('#left').css({'background-image' : 'url(img/rightactivebutton.png)'}); 
    }, 
    function(){ 
    $('#logo').css({"backgroundImage" : "url(img/inactiveHelmet.png)"}); 
    $('#right').css({'background-image' : 'url(img/inactivebutton.png)'}); 

    } 
    ); 

}); 


</script> 
<div id="logo"></div><div id="nav"><a id="left" href="index_sr.html" ></a><a id="right" href="index_en.html" ></a></div>

你必須把CSS代碼了。徽標是一個舵手。 nav是按鈕的div。左右是按鈕

來源

2012-03-07 12:27:34

仍然是相同的，鉻不工作像它假設 – 2012-03-07 13:46:21

嘗試使用css sprite例如http://www.ejhweb.com/css-sprites.html – 2012-03-07 20:34:40

圖片在Chrome和IE中消失

回答

相關問題