Web Analytics Made Easy -
StatCounter toggle image with mouse event and CSS (mac browsers) - CodingForum

Announcement

Collapse
No announcement yet.

toggle image with mouse event and CSS (mac browsers)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • toggle image with mouse event and CSS (mac browsers)

    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>

  • #2
    I have no idea what you mean by 'Mac browsers', but here's how I would do it.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>65054</title>
    		<style type="text/css">
    			#hemiLayer1
    			{
    				position:absolute;
    				left:355px;
    				top:75px;
    				width:230px;
    				height:600px;
    				border:1px solid #000;
    				background-color:#0f0;
    			}
    			#hemiLayer2
    			{
    				position:absolute;
    				left:355px;
    				top:75px;
    				width:230px;
    				height:600px;
    				border:1px solid #000;
    				background-color:#f00;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="container">
    			<!-- THIS WILL BE THE HEMI IMAGE LAYER -->
    			<div id="hemiLayer1">
    				<img id="hemiEngine" src="images/hemi.gif" alt="Chrysler Hemi Engine">
    			</div>
    
    			<!-- THIS WILL BE THE HEMI SPECS LAYER -->
    			<div id="hemiLayer2">
    				<img id="hemiSpecs" src="images/hemiSpecs.gif" alt="Chrysler Hemi Engine Specs">
    			</div>
    		</div>
    
    		<script type="text/javascript">
    			var txt = document.createTextNode('Show Street Hemi Specifications');
    
    			var button = document.createElement('button');
    			button.setAttribute('onclick', 'toggleHemiLayers()');
    			button.appendChild(txt);
    
    			var container = document.getElementById('container');
    			container.insertBefore(button, container.firstChild);
    
    			document.getElementById('hemiLayer2').style.display = 'none';
    
    			function toggleHemiLayers()
    			{
    				var hemiLayer1 = document.getElementById('hemiLayer1');
    				var hemiLayer2 = document.getElementById('hemiLayer2');
    
    				if(hemiLayer2.style.display == 'none')
    				{
    					hemiLayer1.style.display = 'none';
    					hemiLayer2.style.display = 'block';
    					button.firstChild.nodeValue = 'Hide Specifications';
    				}
    				else
    				{
    					hemiLayer1.style.display = 'block';
    					hemiLayer2.style.display = 'none';
    					button.firstChild.nodeValue = 'Show Street Hemi Specifications';
    				}
    			}
    		</script>
    	</body>
    </html>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

    Comment


    • #3
      Thanks for your reply Hemebond.

      Mac browsers means I'm working and testing on the Macintosh platform.

      I'm basically a beginner, so I need some time to comprehend your code, but I copied and pasted just to see if it works.

      In Firefox, the code does what it's supposed to functionally, although I'd need to modify the presentation. However, Opera continues to be a problem. Your code doesn't work at all in Opera (again, this is the Macintosh version of the browser).

      Comment


      • #4
        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.....

        Comment

        Working...
        X