Question

I have the lines of code for a banner changer and whenever i add a link to any of the banners, it goes blank “The banner space goes blank.” every now and then.

         $(function(){

        $('#banner img:gt(0)').hide();
        setInterval(function(){$('#banner :first-

            child').fadeOut().next('img').fadeIn().end().appendTo('#banner');}, 8000);
            });


     </script>

       <div id="banner">


           <img src="images/hollinger.png" width="519" height="76" />
           <img src="banners/leonards.png" width="519" height="76" />
           <img  src="banners/banner1.png" width="493" height="82" border="0" />


       </div><!-- End Banner -

->

Here’s the link to unstand what I mean Here’s the link to understand what I mean http://woodstown-pilesgrove.com/

Answer 1

It goes blank because there is a <a> link within the banner.

<div id="banner">
  <img src="images/hollinger.png" width="519" height="76" />
  <img src="banners/leonards.png" width="519" height="76" />
  <a href="index.html"><img  src="banners/banner1.png" width="493" height="82" border="0" /></a>
</div>

So when the last image gets appended to the banner, it is no longer wrapped by the link, so you end up with this (only the link showing and thus a blank banner):

<div id="banner">
  <a href="index.html"></a>
  <img style="display:none;" src="images/hollinger.png" width="519" height="76" />
  <img style="display:none;" src="banners/leonards.png" width="519" height="76" />
  <img style="display:none;" src="banners/banner1.png" width="493" height="82" border="0" />
</div>

Try removing the link. But if you really need a link, change <div id="banner"> into <a id="banner" href="http://whatever.com">.