Mouseover image lags

Question

On the site I am currently building, I have 5 external links, with mouseovers, linking to social sites such as facebook, twitter, youtube, etc. These links have a small image (15px x 15px) of the social networks logo in white, and then text in white of the name. I am using javascript to change the img src, to the coloured version of the logo, and change the colour of the text to a light blue. The text changes colour immediately, but the images have a slight lag on them, especially the facebook logo.

My code in javascript for the mouseovers is:

function FacebookMO(Type) {
    if (Type == "Off") document.getElementById('Facebook').style.color = "#FFF", document.getElementById("FacebookLogo").src = "Images/Social/Facebook Logo W.png";
    if (Type == "Over") document.getElementById('Facebook').style.color = "#3B5998", document.getElementById("FacebookLogo").src = "Images/Social/Facebook Logo B.png";
    if (Type == "Clicked") document.getElementById('Facebook').style.color = "#141e33"; }

The code for the other 4 links is the same except facebook has been changed for the relevant link/text/img. here is all the relevant code for the html;

<a href="http://www.facebook.com/WrecRecords" class="bar3" id="Facebook"
onmouseout="FacebookMO('Off')" onmouseover="FacebookMO('Over')" onmousedown="FacebookMO('Clicked')"
onmouseup="FacebookMO('Over')" style="padding-left:10px;"><img class="padr5" id="FacebookLogo"
src="Images/Social/Facebook Logo W.png" style="height:15px; width:15px;"/>Facebook</a>

and the css too;

a.bar3 {
    font-family:"Bebas Neue", sans-serif;
    font-size:20px;
    color:#FFF;
    padding:0px 20px;
    text-decoration:none;
}

I've tried preloading the image via different methods including visibility:hidden; display:none; and loading the image into the webpage as a 1x1px img at the bottom, but I still have the lag.

The delay is significantly worse online than when just using the whole site locally. If anybody can offer any help I would really appreciate it, as i'm really stumped as to how to prevent this lag from happening. Thanks.

Edit: just tested this on a few different browsers. On firefox I have no lag and it works flawlessly when tested from the local files. yay! :) however on the web, there is a slight delay of about 3 seconds when you first hover over it, and then works flawlessly afterwards. (Think I just need to load the images immediately when the page loads). Chrome, which is what I was testing on initially, still having this slight lag issue, although i have absolutely no idea why still. I tried testing on internet explorer, but no scripts are running on there at all atm.

Answer 1

The trick with this one is not to use separate images but a so called spritemap. You image is 15x15px, now you make a 30x15px image which contains the normal and hover state next to each other. Instead of replacing the image, you change the background-position of the background image.

Example from http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 30px;
       width: 250px;
}

a:hover {
       background-position: 0 -30px;
}