toggle image with mouse event and CSS (mac browsers)

javascript function for controlling CSS style

[codeWriter]

I'm trying to toggle the visibility of two div containers (layers) with a mouse click. (Macintosh browsers)
I'm using a JavaScript function to control either the "visibility" or "display" style. (Both seem to accomplish the same thing.)

So one anchor link hides the first layer and displays the second layer. The second layer contains another anchor link that hides itself and brings back the first layer.

Testing on Mac browsers works fine, except for Opera.

Opera doesn't like the "display" style and doesn't like the onClick event.
I can get it to almost work with the "visibility" style and the onMouseUp event, however, the second layer only appears for a split second and then reverts back to the first image.

The code is below... any suggestions are greatly appreciated!

function showLayer(v$layer)
{
document.getElementById(v$layer).style.visibility="visible";
}

function hideLayer(v$layer)
{
document.getElementById(v$layer).style.visibility="hidden";
}

<!-- THIS MOUSE EVENT WILL TOGGLE THE TWO LAYERS BELOW -->
<a href="#" onMouseUp="hideLayer('hemiLayer1'); showLayer('hemiLayer2')"><font class="mainLink">Street Hemi Specs</font></a>

<!-- THIS WILL BE THE HEMI IMAGE LAYER -->
<div id="hemiLayer1" style="position:absolute; left:355px; top:75px; width:230px; height:600px; z-index:1; visibility:visible">
<img src="images/hemi.gif" border="0" alt="Chrysler Hemi Engine" name="hemiEngine"></div>

<!-- THIS WILL BE THE HEMI SPECS LAYER -->
<div id="hemiLayer2" style="position:absolute; left:355px; top:75px; width:230px; height:600px; z-index:2; visibility:hidden">
<img src="images/hemiSpecs.gif" border="0" alt="Chrysler Hemi Engine Specs" name="hemiSpecs"><br>

<div class="move35"><a href="#top" onMouseUp="hideLayer('hemiLayer2'); showLayer('hemiLayer1')"><font class="bodyBold">CLOSE SPECIFICATIONS</font></a></div></div>

[garann]

onClick should work in Opera. I think the $ in your variable names might be causing you some trouble, though. (according to this page [codelifter.com])

If you change your onMouseUp back to onClick and rename the variables in your functions, does Opera cooperate?

[codeWriter]

Thanks for the reply garann.

I took $ out of the variables, and changed to onClick, and I get the same results. It seems onClick is actually ok, but the second layer image still only appears for a split second and then reverts back to the first image.

If you have any other ideas, please share.... thanks.

[garann]

Darn. Ok, now I'm just guessing, but what happens if you reverse the order in which the functions are called? Or try to show and hide the divs within the same function? I'm wondering if that link is getting focus after the first function executes and that's causing your problems.

[codeWriter]

Tried both... no luck. Arrrgh!

[codeWriter]

Well, I've solved my Opera incompatibility, but I don't really understand the solution.
If anyone cares to read my initial post, and can explain why my final solution works, I would definitely appreciate it.

First of all, my initial post used the onMouseUp event, I'm currently using onClick, but I think both work.

My code contains two anchor links, the first one hides layer 1 and shows layer 2. Layer 2 contains a second anchor link that hides itself and shows layer 1.

The solution was in the anchor link tags:

When I add <return false> to both, the first anchor link works, but the second anchor link (in layer 2), only works partially. It hides itself and shows the first layer, but it doesn't return me to the top of the page.

When I change the second anchor link to <return true>, it hides itself, shows layer 1, AND returns me to the top of the page.

The anchor link code that works is as follows:

<a href="#" onClick="hideLayer('hemiLayer1'); showLayer('hemiLayer2'); return false"><font class="mainLink">Street Hemi Specs</font></a>

<a href="#top" onClick="hideLayer('hemiLayer2'); showLayer('hemiLayer1'); return true">
<font class="bodyBold">CLOSE SPECIFICATIONS</font></a>

Can anyone explain this to me?
thanks.....