javascript, "поднятие" слоя!
Привет всем!
У меня в скрипте какая-то ошибка (я в нем не силен)!
Я хоче чтоб при ножатие по слою (он в обсалютных координатах), он становился выше (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>
|
