Question

I never use jQuery before so I ask a friend to help me with some small project I’m working on, I wanted to load different pictures when you hover over buttons, and you can see how that works on our site. It works fine with FF and Opera, I have tested in Chrome as well, but when I try it from my machine locally it works great, but as soon as I put it on the server the pictures in Chrome and IE start to disappear when you change buttons. Here’s the code I use:

<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>

Can anyone point out what I’m doing wrong?

Thanks

Answer 1

It’s not an issue with Jquery. It’s natural process because when you hover over the link then it send an new other HTTPS request to the server. It’s good if your use css sprite images for this.

Read this article for this http://css-tricks.com/css-sprites/