Hi there. I'm Robert, and I started my own website a few years ago. It is http://uk.geocities.com/robcboff - yes, haha, very funny subdomain name.

Anyway, after experimenting with Applets, which stopped working after a while, I made my own navigation bar from scratch. I used my wide knowledge of HTML and limited knowledge of Javascript to design a script that allows me to show and hide images over and over again in a single area of the page.

I have made an example that you can look at:

HTML Code:
<style type="text/css">
<!-- 

 span {border-bottom:0px;border-left:0px;border-right:0px;height:0px;width:100%;font-size:0px;}
 .nav {font-size:12px;font-weight:bold;border:none;text-decoration:none;width:136px;height:13px;color:#000099;font-family:Arial;margin:-14px 0px 0px 0px;vertical-align:top;}
 .nava {height:13px;margin-top:-1px;}
 .navb {height:13px;margin-top:-2px;}
 .alert {border-bottom:1px dotted black;cursor:help;}
 .al {text-decoration:none;color:#006629;}
 .al:hover {text-decoration:underline;}
 .ah {font-size:1px;border-top:1px solid #CCCCCC;margin:4 -3 0 -3;}
// -->
</style>

<table cellpadding=10 name="main">

<td valign=top style="font-size:12px;font-family:verdana;width:138px;"><center>

<p class="navbar" style="border-left:1px solid #F39333;border-top:1px solid #F39333;border-right:1px solid #AF7133;border-bottom:1px solid #BF7933;width:138px;margin-top:-10px;margin-bottom:0px;">

<span style="border-top:1px solid #FFB163;"></span>
<span style="border-top:1px solid #FFB76F;margin:-2px 0px -1px 0px;"></span>

<span class="nava">
<img src="nav-bg1.gif" id="no1a"><img src="nav-bg2.gif" style="display:none;" id="no1b"><img src="nav-bg3.gif" style="display:none;" id="no1c">
<a href="construct.html" class="nav" 
onMouseOver="javascript:document.all.no1a.style.display='none';
javascript:document.all.no1b.style.display='inline';javascript:this.style.color='#3775FF';"
onMouseOut="javascript:document.all.no1a.style.display='inline';
javascript:document.all.no1b.style.display='none';
javascript:document.all.no1c.style.display='none';javascript:this.style.color='#000099';"
onMouseDown="javascript:document.all.no1b.style.display='none';
javascript:document.all.no1c.style.display='inline';"
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Construction List&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</span>

<span class="navb">
<img src="nav-bg1.gif" id="no011a"><img src="nav-bg2.gif" style="display:none;" id="no011b"><img src="nav-bg3.gif" style="display:none;" id="no011c">
<a href="website_history.html" class="nav" 
onMouseOver="javascript:document.all.no011a.style.display='none';
javascript:document.all.no011b.style.display='inline';javascript:this.style.color='#3775FF';"
onMouseOut="javascript:document.all.no011a.style.display='inline';
javascript:document.all.no011b.style.display='none';
javascript:document.all.no011c.style.display='none';javascript:this.style.color='#000099';"
onMouseDown="javascript:document.all.no011b.style.display='none';
javascript:document.all.no011c.style.display='inline';"
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Website History&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</span>
I have also uploaded this page and three images to http://uk.geocities.com/robcboff/longcode/longcode.html

As you may be able to see:
default image is nav-bg1.gif
#onMouseover is nav-bg-2.gif (display:none)
onMouseDown is nav-bg3.gif (display:none)
onMouseOut is nav-bg1.gif

What I would like is to be able to get this code down to a complete minimum. If you have read the code, then you should be aware that for just one link on my navigation, it takes 13 wrapped lines of text. Now, if I have 30 of these to make my Nav, I have almost 22KB loaded up here. And this is on my homepage!

If I was able to find a script that could 'swap' the images with a seperate javascript, I would be really heppy and grateful.

Just as a note: I have tried using preloading javascripts before, and they don't work. I think it may have been on this forum that I asked for some help with it. What happens is that the images do swap, as I want them to, but do not preload. After about a second once mouse-ing over them, they then load up. I don't know if it's just my code stopping this or not. I also tried copying a script from the Windows Vista Homepage (preloader) which works really well on their site but I can't get it to work.

I have also tried using scripts to move the images, for example, if I had all the three images in one and then used a script to 'move' them, but I couldn't get it to work.

I have thought of using colours instead of images, which, as a script, works really well, but I still want to keep my images.

If I went back to my Applet, I couldn't be sure that it would always work, plus, the applet itself is an extra 5KB. This doesn't make much difference and I don't really wanna trash the code I've been working really hard on. Plus, all my links as an applet are not hyperlinks, so my search engine can't get through them. I have thought of adding a secret/seperate colour version of this aside it which could help but I want to use that as last resort.

Is anyone able to help me with this scripting request? If anyone if able to help me with it, I will add on a visible banner to my website thanking Dynamic Drive (and your name if you want it) for their help.

Thanks SSSOOOOO much for all your time and help!