4 Replies - 867 Views - Last Post: 19 May 2011 - 06:55 PM

#1 seth123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 15-May 11

trouble with z-index and links

Posted 15 May 2011 - 01:29 PM

I am new to using javascript and I am having trouble with an assignment. I am to create 4 links on a html page that when the link is clicked it brings an image up in a certain position. When you click the second link it is to bring that image up in the same position as the first image and so on and so on. I can get the links to work but the image is full size and it is not in the position that I was expecting it to be in. Once the image is displayed it covers the links so they are not able to be used. I put all the code on one page just for testing purposes, I figred that if I could get it to work in one page splitting the code into a css page and a js page would be the easy part. I have rewritten the code with buttons instead of links and I get the same result.I think there is a problem with the css but I am not sure. If someone could please help me with this that would be great. Thanks Seth

 <?xml version = "1.0"encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
  "http://www.w3c.org/TR?xhtml1/DTD/xhtml1-strict.dtd">`
  <!--Lab_5.3.-->
  <html xmlns= "http;//www.w3c.org/1999/xhtml">
  <head>
  <title>Background Image zIndex Position </title>
  
<!--css code-->
<style type= "text/css">
.girl1{
	position:	 absolute;
	top:		200px;
	left:		400px;
	z-Index:	0;

}
.girl2{
	position:	 absolute;
	top:		200px;
	left:		400px;
	z-Index:	0;
}
.girl3{
	position:	 absolute;
	top:		200px;
	left:		400px;
	z-Index:	0;
}
.girl4{
	position:	 absolute;
	top:		200px;
	left:		400px;
	z-Index:	0;
}
</style>
</head>
<!--Javascript code -->
<script type="text/javascript" >
  var top="image"
  
function toTop(newTop){
  	  //get DOM address for the new top and the old top elements
 domTop = document.getElementById('top').style;
 domNew = document.getElementById('newTop').style;
 
 // set the xIndex properties of the two elements
 domTop.zIndex ="0";
 domNew.zIndex ="10";
 top = newTop;
  }
</script>

<!-- html code -->
<body>
<img class="girl1" src="girl1.jpg" alt="girl 1" id="girl1" height="200" width="200"/>
<img class="girl2" src="girl2.jpg" alt="girl 2" id="girl2" height="200" width="200"/>
<img class="girl3" src="girl3.jpg" alt="girl 3" id="girl3" height="200" width="200"/>
<img class="girl4" src="girl4.jpg" alt="girl 4" id="girl4" height="200" width="200"/>

<p><a href = "girl1.jpg" onclick="toTop('image')" />Hot Girl 1</p>
<P><a href = "girl2.jpg" onclick="toTop('image')" />Hot Girl 2</P>
<P><a href = "girl3.jpg" onclick="toTop('image')" />Hot Girl 3</P>
<P><a href = "girl4.jpg" onclick="toTop('image')" />Hot Girl 4</P>
</body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: trouble with z-index and links

#2 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: trouble with z-index and links

Posted 15 May 2011 - 03:20 PM

I am not sure if that is the actual code you try to run.
Where are elements with 'top' and 'newTop' ids?
Why are you passing the 'image' string as parameter to the toTop function on all 4 images?
In order to change an element's style, don't pass it to a new variable and change the new variable, like here:
domTop = document.getElementById('top').style;
domTop.zIndex ="0";

you should update it on the element like so (assuming top is an id of some element):
document.getElementById('top').style.zIndex='o';


By the way, I'd like to see all these hot girls pics ;)
Was This Post Helpful? 0
  • +
  • -

#3 seth123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 15-May 11

Re: trouble with z-index and links

Posted 15 May 2011 - 05:24 PM

Yes this was the code i was trying to run. I was given a sample piece of code that I was to use. I also figured out that my images are stacked on top of each other in the middle of the page like I expected, but I can't control those images. The link do work to some degree. As far passing the "image" string as a parameter I thought I was calling the function to change the z index of the images. I guess I am a bit confused on the element ids. Should I create 2 divs one with the id of top and another with the id of newTop? Thanks again for your help.
Was This Post Helpful? 0
  • +
  • -

#4 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: trouble with z-index and links

Posted 16 May 2011 - 07:23 AM

Here is a very simple code, all css and scripts are written on the same file. it simply changes the z index of 2 div elements once.
you can see though, how the script integrates with the html (mainly the id of the divs):
<html>
<head>
<style type='text/css'>
	div.cont {
		position:absolute;
	}
	div.box{
		position:absolute;
		top:0;
		left:0;
		background-color:white;	
	}
	div#butt{
		padding:30px;
	}
	div#box2{
		z-index:-1;
	}
</style>
<script type='text/javascript'>
	function switch_state(){
		document.getElementById('box1').style.zIndex = -1;
		document.getElementById('box2').style.zIndex = 0;
	}
</script>
</head>
<body>
	<div class='cont'>
		<div class='box' id='box1'>div1</div>
		<div class='box' id='box2'>div2</div>
	</div>
	<div id='butt'>
		<input type='button' value='change z' onclick='switch_state()' />
	</div>
</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#5 seth123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 15-May 11

Re: trouble with z-index and links

Posted 19 May 2011 - 06:55 PM

View Postseth123, on 15 May 2011 - 05:24 PM, said:

Yes this was the code i was trying to run. I was given a sample piece of code that I was to use. I also figured out that my images are stacked on top of each other in the middle of the page like I expected, but I can't control those images. The link do work to some degree. As far passing the "image" string as a parameter I thought I was calling the function to change the z index of the images. I guess I am a bit confused on the element ids. Should I create 2 divs one with the id of top and another with the id of newTop? Thanks again for your help.



Hey Japanir thanks for your help. I finally got my code to work and wverythinhg is running smooth. Thanks again Seth
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1