Pixelpost

ctfoto · #1 02-08-2008, 01:31 PM

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 -->

ctfoto · #2 02-08-2008, 03:31 PM

also... occasionally, after i roll the cursor away from the tab, the secondary image remains (instead of being replaced by the primary image).

or, even worse, instead of replacing the primary image, i get the dreaded "?"

is this just sloppy code on my part, or what?...

ctfoto · #3 02-08-2008, 05:24 PM

...did i post this in the wrong spot, or is everyone just out enjoying the beautiful weather?

i should go do that...

**dakwegmo**+ · #4 02-08-2008, 06:40 PM

Templates might have been a better place for it, since it has more to do with layout/design than it does PixelPost proper. However, I did read it, and can't be of much help at the moment, since I don't have Safari to see what the problem looks like.

ctfoto · #5 02-09-2008, 01:56 AM

thanks for moving this over here, dakwegmo+

Scarabaeus · #6 02-09-2008, 04:48 PM

Just a suggestion as I was going through the tabs when I switched between them sometimes I couldn't get the right one becuase the rollovers are bigger than the original graphics. Perhaps you could make them taller but the same width up?

ctfoto · #7 02-10-2008, 10:11 PM

so you think the different width is the problem... hmmmm

i'll give it a try.

thanks Scarabaeus.

ctfoto · #8 02-10-2008, 10:20 PM

looks like you were right, Scarabaeus... tried the secondary image oriented vertically (taller than wide) and it worked fine. but then it was too tall.

so i just changed the text to something shorter: Selects instead on OneShots...
(i like Selects way better anyway!)

works just fine now!!

cheers,

ctfoto · #9 02-10-2008, 10:23 PM

well shoot.

works fine on FF, but not on Safari...

does anyone even use Safari anymore?

Scarabaeus · #10 02-11-2008, 02:06 PM

Works well on IE too.

Pixelpost

Authentic Photoblog Flavour