Super Easy Javascript 22.11.08
I have a front page to a site that consists of a UL slidemenu in Javascript. I have the images/links in the UL as 8-bit transparent PNG’s.
I want the images to display loading GIF’s until they are loaded at which point they should be switched out for their respective PNG.
It will prob be best to have the div/UL/li hidden ussing CSS to avoid the javascript flash on the load.
Here’s the relevant HTML:
<body onload=”slideMenu.build(’sm’,400,10,10,1)”>
<div id=”container”>
<div id=”inner”><ul id=”sm” class=”sm”>
<li><a hrf=”/rocket”><img src=”files/a.png” alt=”" /></li>
<li><a hrf=”/tiki”><img src=”files/b.png” alt=”" /></li>
<li><a hrf=”/obama”><img src=”files/c.png” alt=”" /></li>
<li><a hrf=”/sniper”><img src=”files/d.png” alt=”" /></li>
<li><a hrf=”/sword”><img src=”files/e.png” alt=”" /></li>
<li><a hrf=”/axe”><img src=”files/f.png” alt=”" /></li>
</ul>
<div id=”logo”><a hrf=”/” title=”Home” rel=”home”><img src=”/sites/all/themes/zen/G2/logo.png” alt=”Home” id=”logo-image” /></a></div>
<div id=”links”>
<ul class=”links”><li class=”first menu-1-1-2″><a hef=”/about” class=”menu-1-1-2″>About</a></li>
<li class=”menu-1-2-2″><a hrf=”/privacy” class=”menu-1-2-2″>Privacy</a></li>
<li class=”menu-1-3-2″><a hrf=”/blog” class=”menu-1-3-2″>Blog</a></li>
<li class=”menu-1-4-2″><a hrf=”/FAQ” class=”menu-1-4-2″>FAQ</a></li>
<li class=”last menu-1-5-2″><a hrf=”/contact” class=”menu-1-5-2″>Contact</a></li>
</ul>
</div>
</div><!–End Inner Div–>
</div><!–End Container Div–>
</body>
