Изображение исчезает в Chrome и IE - PullRequest
Новая
       9

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

1 голос
/ 07 марта 2012

Я никогда раньше не использовал jQuery, поэтому прошу друга помочь мне с небольшим проектом, над которым я работаю, я хотел загружать разные картинки, когда вы наводите курсор на кнопки, и вы можете увидеть, как это работает на нашем сайт . Он отлично работает с FF и Opera, я также тестировал в Chrome, но когда я пробую его со своей машины локально, он отлично работает, но как только я помещаю его на сервер, изображения в 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>

Кто-нибудь может указать, что я делаю неправильно?

Спасибо

Ответы [ 4 ]

0 голосов
/ 07 марта 2012

Разделить фото как

  • leftActiveHelmet.png ---- левый шлем
  • rightActiveHelmet.png ---- правый шлем
  • inactiveHelmet.png --- неактивный шлем
  • inactivebutton.png --- неактивная кнопка
  • leftActivebutton.png - активная левая кнопка

  • 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 для кнопки. слева и справа находятся кнопки

0 голосов
/ 07 марта 2012

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

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

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

0 голосов
/ 07 марта 2012

Это не проблема с Jquery. Это естественный процесс, потому что, когда вы hover переходите по ссылке, он отправляет новый другой запрос HTTPS на сервер. Это хорошо, если вы используете для этого css sprite изображения.

Прочтите эту статью для этого http://css -tricks.com / css-sprites /

0 голосов
/ 07 марта 2012

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

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

, поэтому измените ее следующим образом: 

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

и т.

...