PDA

View Full Version : JavaScript quirkiness...

ctfoto
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>
<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:
<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
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
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
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
02-09-2008, 01:56 AM
thanks for moving this over here, dakwegmo+
Scarabaeus
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
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
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
02-10-2008, 10:23 PM
well shoot.

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

does anyone even use Safari anymore?
Scarabaeus
02-11-2008, 02:06 PM
Works well on IE too.
Dkozikowski
02-11-2008, 02:34 PM
....does anyone even use Safari anymore?

Are you kidding me?!

Safari owns IE and Firefox for MAC.

It may not be as extensible as Firefox but the speed blows both browsers out of the water.

I wish IE would fall off the face of the earth.
kevincrafts
02-11-2008, 04:42 PM
I'll second that - Safari is my favorite browser. I only use firefox for browser testing or when I'm doing some css troubleshooting.