how can I reload a "CSS background-image" each time I hover on it?

Question

I'm new as a webmaster as I am asking a question in this web that so often has helped me. My knowledge so far is html, css and VERY, VERY little (atm) of Javascript (jQuery), visual basic, asp.net

As ignorant as I am, I try to avoid Javascript as much as possible and focus a lot on CSS's.

In the web I'm currently working I have the menu links as I always do looking like this:

<div class="linkszima">
            <ul>
                <li class="link1">
                    <a id="A1" runat="server" href="#">
                        <h2>Inicio</h2>
                    </a>
                </li>
                <li class="link2">
                    <a id="A2" runat="server" href="#">
                        <h2>Mantenimiento</h2>
                    </a>
                </li>
                <li class="link3">
                    <a id="A3" runat="server" href="#">
                        <h2>Diseño Web</h2>
                    </a>
                </li>
                <li class="link4">
                    <a id="A4" runat="server" href="#">
                        <h2>Programas</h2>
                    </a>
                </li>
                <li class="link5">
                    <a id="A5" runat="server" href="#">
                        <h2>ERP</h2>
                    </a>
                </li>
                <li class="link6">
                    <a id="A6" runat="server" href="#">
                     <h2>Contacto</h2>
                    </a>
                </li>
            </ul>
        </div> 

and the css relative to my question:

.link1 a {
height:55px;          
}
.link1 a:hover {
background-color: transparent; 
background-image:url(../Images/GifDeInicio.gif);    
background-repeat:no-repeat;
background-position:12px 0;   
}

Now it's perfectly working as required except that the animated gif (not a loop) doesn't load again next time you "hover" it.

Are there any way to load the gif every time you hover with just css? if not possible and I need to use jQuery, would anyone being so kind as to explain how to do it step by step? ( I have currently jquery-1.7.1.js loaded but could get another if necessary)

Thanks a lot in advance and excuse my English, please. It's not my first language.

Answer 1

Not just specifically to an li element, if you want to change/reload a background image on some event, try embedding a span or other element inside the main element, and set a background image on that. Then you can replace that element without having to reload an entire stylesheet. Something like this:

<div class="content-element">
    <span class="bg-image-element" style="background-image: url('old.png')"></span>
    <!-- .... other stuff .... -->
</div>

<script>
    $('.some-element').someEvent(function() {
        $('.bg-image-element').replaceWith(<span class="bg-image-element" style="background-image: url('new.png')"></span>
    });
</script>

I have not seen consistent behavior when changing just the css background-image via javascript/jQuery works. But replacing an entire element does seem to force a background image reload.

Answer 2

If you want to try jQuery, you can do something like this:

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
    // preload images function
    function preload(lst_imgs) {
        $(lst_imgs).each(function() {
            (new Image()).src = this;
        });
    }
    $(document).ready(function() {
        var src = '../Images/GifDeInicio.gif'; 
        // preload background image
        preload([src]);
        // show background image on hover
        $('.link1 a').hover(function() {
            $(this).css('background-image', 'url(' + src + ')');
        });
    });
</script>

Answer 3

Well, while on bed I though of the right solution for my problem. I had to NOT use background image and insteed go for html img but works much better as I didn't though at the start using a backward animation gif and now the links will look much better.

I just use the onmouseover and onmouse out commands.

check the result here if you like: http://jsfiddle.net/dN2at/

<li class="link1"> <a id="A1" runat="server" href="#"> <img src="http://s10.postimg.org/j1fbosayt/NADA.png"  onmouseover="this.src='http://s7.postimg.org/tztg228s7/Gif_De_Inicio.gif';" onmouseout="this.src='http://s18.postimg.org/ww2tpxsb9/Gif_De_Inicio_Bis.gif';"/>
                        <h2>Inicio</h2>
                    </a>

    </li>  

it is still NOT the solution of the problem, just a fix, but it may help fellow mates around.

Ty for your time and till next time.