Изображение исчезает в 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

Вы используете функцию CSS странно ...

посмотреть здесь: http://api.jquery.com/css/

так изменить его таким образом:

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

и т.д.

источник

2012-03-07 12:08:51

, когда я положил, dw говорит, что есть ошибка кода, и она доцентная работа вообще –

Ваши изображения загружаются, поэтому, когда вы перекатываете их, это небольшой «глюк», где изображение загружается.

Try поджимать изображения, как описано здесь: http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

е: По крайней мере, вот как я интерпретировать вашу проблему. Когда вы говорите, что они «исчезают», вы имеете в виду надолго?

источник

2012-03-07 12:09:51

nope, пожалуйста, перейдите по адресу http://studiospartacus.com/index1.html с хром или т. д., и вы увидите, что им говорит о –

. Я также пытаюсь изменить backgroundImage на background-image, и он по-прежнему работает, когда я тестирую его локально, но вскоре я тестирую его на сервере, его багги, изображение все время загружается, когда u кнопки изменения –

Это связано с необходимостью перезагрузки каждый раз. Для замены изображения требуется время, так как JavaScript не мгновен. попробуйте использовать CSS для обмена вместо JS. –

Это не проблема с 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 тоже. логотип - это helment. nav - это кнопка для кнопки. Влево и вправо находятся кнопки

источник

2012-03-07 12:27:34

все тот же, хром, не работает, как он полагает, –

попробуйте использовать css спрайты, например. http://www.ejhweb.com/css-sprites.html –

Изображение исчезает в Chrome и IE

ответ

Смежные вопросы