javascript, "поднятие" слоя!

ARA · 25.06.2007, 20:13

Привет всем!
У меня в скрипте какая-то ошибка (я в нем не силен)!
Я хоче чтоб при ножатие по слою (он в обсалютных координатах), он становился выше (1), чем остальный, а при ножитае по другому слою, возрощался на место (auto)
не могу понять ошибку, он говоритпредпологается наличие индификатора!
Подправти меня! Спасибо

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <title>Untitled</title>
    <style type="text/css"> 
    <!-- 
    html, body {
    margin: 0px;
    padding: 0px;
    border: none;
    background: #fff;}
    
	#list {
	width: 70%;
	height: 400px;
	margin: 100px auto auto auto;
	padding: 0px;
	border: none;
	background: red;}
	
	.listik {
	width: 150px;
	height: 130px;
	margin: 0px;
	padding: 0px;
	border: solid 1px red;
	position: absolute;}
	
	.listik h3 {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 3px 4px;
	border: none;
	background: #6c9;}
	
	
	#l1 {background: #ff7; left: 18%; top: 24%; z-index: 1;}
	#l2 {background: #ff6; left: 21%; top: 29%; z-index: 2;}
	#l3 {background: #ff5; left: 24%; top: 34%; z-index: 3;}
	#l4 {background: #ff4; left: 27%; top: 39%; z-index: 4;}
	#l5 {background: #ff3; left: 30%; top: 44%; z-index: 5;}
	#l6 {background: #ff2; left: 33%; top: 49%; z-index: 6;}
	#l7 {background: #ff1; left: 36%; top: 54%; z-index: 7;}
	
	#listok {
	width: 200px;
	height: 100px;
	margin: 35px 3% auto 10px;
	padding: 0px;
	border: solid 1px red;
	background: #ff6;
	float: right;}
	
	#listok1 {
	width: 200px;
	height: 150px;
	margin: auto;
	padding: 0px;
	border: solid 1px red;
	background: #ff1;
	position: absolute;
	top: 37%;
	left: 70%;}
	
	.smail_list {
	width: 100px;
	height: 90px;
	margin: auto;
	padding: 0px;
	border: solid 1px red;
	background: #ff1;
	position: absolute;}
	
	#smail_l1 {top: 20%; left: 2%;}
	#smail_l2 {top: 40%; left: 2%;}
	#smail_l3 {top: 60%; left: 2%;}
	
	#kalkul {
	width: 200px;
	height: 150px;
	margin: 0;
	padding: 0px;
	border: solid 1px green;
	position: absolute;
	left: 10%;
	bottom: 0;}
	
	#navigator {
	width: auto;
	height: auto;
	margin: auto;
	padding: 0px;
	border: solid 1px red;
	background: green;
	float: left;
	position: absolute;
	top: 1%;
	left: 58%;}
	
	#nav {
	width: auto;
	height: auto;
	margin: 90px 0px 0px 0px;
	padding: 0px;
	border: none;
	background: #ff3;
	float: left;}
	
	#nav a {
	width: auto;
	height: auto;
	margin: 0px;
	padding: 4px 20px;
	border: none;
	background: #f89;
	display: block;
	float: left;}
	
	#nav a:link {color: red; text-decoration: none;}
	#nav a:visited {color: red; text-decoration: none;}
	#nav a:hover {color: #fff; text-decoration: none; background: red;}
    --></style>
	<script type="text/javascript">
	<!--
     function up(id) 
     {
     for (k=1; k<=10; k++)
     {
     document.all.('u' + k).style.zIndex='auto';
     }

     document.getElementById(id).style.zIndex='1';
     }
	//-->
	</script>

</head>

<body>
	<div id="list">
		<div id="listok"></div>
		<div id="listok1"></div>
		<div class="listik" id="l1"><h3 onclick="up('l1');">Zagolovok</h3></div>
		<div class="listik" id="l2"><h3 onclick="up('l2');">Zagolovok</h3></div>
		<div class="listik" id="l3"><h3 onclick="up('l3');">Zagolovok</h3></div>
		<div class="listik" id="l4"><h3 onclick="up('l4');">Zagolovok</h3></div>
		<div class="listik" id="l5"><h3 onclick="up('l5');">Zagolovok</h3></div>
		<div class="listik" id="l6"><h3 onclick="up('l6');">Zagolovok</h3></div>
		<div class="listik" id="l7"><h3 onclick="up('l7');">Zagolovok</h3></div>
	</div>
	
	<div class="smail_list" id="smail_l1"></div>
	<div class="smail_list" id="smail_l2"></div>
	<div class="smail_list" id="smail_l3"></div>

	<div id="navigator">
		<div id="nav">
			<a href="">menu</a>
			<a href="">menu</a>
			<a href="">menu</a>
		</div>
	</div>

	<div id="kalkul"></div>

</body>
</html>