SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy getelementbyid & zindex??

    Hi all,
    Can anyone direct me to a tutorial, or preferably a working example of how z-index can be used with some sort of js onclick command?

    I have 3 images and 3 links on my page,

    I want to put the images in different layers in the same spot on the page.
    I want to hide these, and only show the layer when a user clicks on a link.

    Any ideas?
    Thanks!
    D
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI all -
    Ive posted the site here to show what im trying to do:
    http://bluecrushdesign.co.za/new/

    Firstly - how do we hide the redbox (zindex3) so it only shows when you click on "gq website"

    Secondly any idea where i can find the function for this to work?
    Thanks!

    dee
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Practice</title>
     
    		<style type="text/css">
    			#main { position: relative; }
    			#image1, #image2 { 
    				position: absolute; 
    				display: none;
    				width: 100px; 
    				height: 100px; 
    			}
    			#image1 { background: red; }
    			#image2 { background: blue; }
    		</style>
     
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    		<script type="text/javascript">
    			$(function() {
    				$('#nav li').click(function() {
    					$('#main div').hide();
    					if(this.id == 'one') { $('#image1').show(); }
    					if(this.id == 'two') { $('#image2').show(); }
    				});
    			});
    		</script>
    	</head>
     
    	<body>
    		<div id="nav">
    			<ul>
    				<li id="one"><a href="#">GQ website</a></li>
    				<li id="two"><a href="#">HTML emails</a></li>
    			</ul>
    		</div>
     
    		<div id="main">
    			<div id="image1"></div> 
    			<div id="image2"></div>  
    		</div>  
     
    	</body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •