53 users online (0 members and 53 guests)  


  Results 1 to 3 of 3

Related

  1. Replies: 1
  2. Changing Text with a button    Forum: Javascript Forum
    Replies: 1
  3. Changing Text With a Button    Forum: HTML Forum
    Replies: 1
  4. Changing text size with a button    Forum: Javascript Forum
    Replies: 2
  5. Changing a picture by clicking it    Forum: Website Scripts Forum
    Replies: 9
  1. #1
    adamsen's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Jan 2009
    Location
    Denmark
    Posts
    128

    Question Changing z-index etc. by clicking a button

    Hi!

    How can i change the z-index, top, left and things like that of an element by clicking a button?

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: Changing z-index etc. by clicking a button

    This can't be done by CSS alone. You need Javascript.

    With that said, here's an example of how you would do it:
    Code:
    <style type="text/css">
    img.x
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    width:100px;
    height:100px;
    }
    #wrap{
    	border:3px double #777;
    	width:500px;
    	padding:10px;
    	font-family:Arial,Tahoma,Verdana;
    	font-size:10pt;
    	padding:10px;
    }
    </style>
    <div id="wrap">
    	<h1>This is a Heading</h1>
    	<img class="x" src="http://www.w3schools.com/Css/bulbon.gif" id="myimg"> 
    	<p>Default z-index is 0. Z-index -1 has lower priority.</p>
    </div>
    
    <p>
    	<input type="button" value="Change the image's z-index" onclick="document.getElementById('myimg').style.zIndex='1';">
    </p>
    
    <p>
    	<input type="button" value="Change the image's top property" onclick="document.getElementById('myimg').style.top='100px';">
    </p>
    
    <p>
    	<input type="button" value="Change the image's left property" onclick="document.getElementById('myimg').style.left='100px';">
    </p>
    Hope that helps.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  3. #3
    adamsen's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Jan 2009
    Location
    Denmark
    Posts
    128

    Re: Changing z-index etc. by clicking a button

    Ok, thanks, but what will the code be, if I can click a button, and then it changes back again?



Tags for this Thread