Pixelpost Forum - JavaScript quirkiness...

oh my GAWSH! ...this one i can't figure out.

this is my first attempt at JS code, adding rollovers to the link tabs on my Delicious based site: www.ctfoto.com/

mostly, things seem fine so far, except, on Safari (not on FF though), when i roll over the #8 tab, the secondary image is shown as it should, but then when i remove the cursor and the primary image returns, it has been stretched to the same dimensions as the secondary image, and it stays that way - still functional as a rollover - until the page is refreshed, at which point the primary image returns to its proper dimensions.

roll over it again, and it does the same thing...

i'm at a loss. the code for tab #8 is exactly the same as all the other tabs; the image name is listed properly, as all the other tabs, in the 'new array' code; the source image is identically saved to my server; i've cleared cookies and cache; etc... just can't figure out what's happening.

any ideas?

here's the JS, located in the <head>

Code:

<script type="text/javascript">

var revert = new Array();

var inames = new Array('logo_pets','logo_portraits','logo_wedding','logo_storyone','logo_storytwo','logo_storythree','logo_storyfour','logo_singles','logo_about');



// Preload

if (document.images) {

  var flipped = new Array();

  for(i=0; i< inames.length; i++) {

    flipped[i] = new Image();

    flipped[i].src = "logos/"+inames[i]+"2.png";

  }

}



function over(num) {

  if(document.images) {

    revert[num] = document.images[inames[num]].src;

    document.images[inames[num]].src = flipped[num].src;

  }

}

function out(num) {

  if(document.images) document.images[inames[num]].src = revert[num];

}

</script>

...and here's the code for the tabs:

Code:

<div id="nav_sub">

                



                <a title="Photos of pets" href="http://ctfoto.com/pets/"><img src="logos/logo_pets1.png" name="logo_pets" onMouseOver="over(0)" onMouseOut="out(0)" border="0"></a>  

                

                <a onclick="Effect.toggle('info','BLIND'); return false;" title="Photos of people" href="#"><img src="logos/logo_portraits1.png" name="logo_portraits" onMouseOver="over(1)" onMouseOut="out(1)" border="0"></a>  

                

                <a onclick="Effect.toggle('info','BLIND'); return false;" title="Wedding portfolio" href="#"><img src="logos/logo_wedding1.png" name="logo_wedding" onMouseOver="over(2)" onMouseOut="out(2)" border="0"></a>  

                

                <a onclick="Effect.toggle('info','BLIND'); return false;" title="Arctic Bay, Nunavut" href="#"><img src="logos/logo_storyone1.png" name="logo_storyone" onMouseOver="over(3)" onMouseOut="out(3)" border="0"></a>          

                

                <a onclick="Effect.toggle('info','BLIND'); return false;" title="Nelson Lagoon, Alaska" href="#"><img src="logos/logo_storytwo1.png" name="logo_storytwo" onMouseOver="over(4)" onMouseOut="out(4)" border="0"></a>  

                

                <a onclick="Effect.toggle('info','BLIND'); return false;" title="Lost in Jamaica" href="#"><img src="logos/logo_storythree1.png" name="logo_storythree" onMouseOver="over(5)" onMouseOut="out(5)" border="0"></a>  

                

                <a onclick="Effect.toggle('info','BLIND'); return false;" title="Biking across Iowa" href="#"><img src="logos/logo_storyfour1.png" name="logo_storyfour" onMouseOver="over(6)" onMouseOut="out(6)" border="0"></a>  



                <a onclick="Effect.toggle('info','BLIND'); return false;" title="Stand-alone images" href="#"><img src="logos/logo_singles1.png" name="logo_singles" onMouseOver="over(7)" onMouseOut="out(7)" border="0"></a>  



                <a onclick="Effect.toggle('info','BLIND'); return false;" title="About Chris, Contact, Etc..." href="#"><img src="logos/logo_about1.png" name="logo_about" onMouseOver="over(8)" onMouseOut="out(8)" border="0"></a>        





        </div> <!-- logo_sub -->