Question

I have recently added jQuery to a site of mine. When hovering over sections of an image map the background of another div will change, and then change back when the mouse leaves the image map.

The problem occurs when the background changes, it seems to glitch and flash or blink. I have attempted to add a fade or animate to the script but have failed. Could anyone suggest a good way to add this to the code?

Thank you in advance!

<script  type='text/javascript'>
$(function() {
  $(".slide2").hover(function() {
    $("#nav2").css("background", "url(img/second.png)")
  });
  $(".slide2").mouseout(function() {
    $("#nav2").css("background", "url(img/first.png)")
  });
  $(".slide3").hover(function() {
    $("#nav2").css("background", "url(img/third.png)")
  });
  $(".slide3").mouseout(function() {
    $("#nav2").css("background", "url(img/first.png)")
  })
});</script>

Answer 1

I guess the problem it is not in the script, but it is in loading the image. You have to pre-cache the image the flash it is the time that the browser takes to load the new image because it is making a request to the server and download the image. Try to use this technique: sprites (best solution) or you can insert it in the html at the end of the page and add a css that hide the image, but your browser will download it (good only if you have huge images to load).