Как при клике на DIV отобразить его поверх других?

Как при клике на DIV отобразить его поверх других?

Новый участник

Сообщения: 22
Благодарности: 2

Всем доброго времени суток.
Ситуация следующая...
Имеется 5 слоёв. Пользователь может их перетаскивать в пределах определённой области.
Проблема:
при перемещении слоёв (div) они накладываются друг на друга, согласно z-index, который сохраняется в БД и имеет порядок определяемый пользователем. Как при клике на слое отобразить его поверх других не изменив при этом порядок отображения других слоёв? То есть, если к примеру у нас был следующий порядок:
слой 1 - индекс 0,
слой 2 - индекс 1,
слой 3 - индекс 2,
слой 4 - индекс 3,
слой 5 - индекс 4,
то как при клике на слое 3 получить следуещее:
слой 1 - индекс 0,
слой 2 - индекс 1,
слой 4 - индекс 2,
слой 5 - индекс 3,
слой 3 - индекс 4 ?
В jave "мёртвый", может в самом языке какая функция есть, типа "тор" или что-то в этом роде? Заранее благодарю всех откликнувшихся.

Отправлено: 11:34, 24-09-2009

skyfish

Пользователь

Сообщения: 69
Благодарности: 23

Профиль | Отправить PM | Цитировать

Вам нужен document.getElementById(id).style.zIndex:

Код:

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
<!--
topLevel=5 // top z-index
lastID=""
function changeZindex(obj){
id=obj.id
document.getElementById(id).style.zIndex=topLevel

if(lastID==""){
lastID=id
}

if(lastID==id){
document.getElementById(id).style.zIndex=topLevel
}
else{
document.getElementById(lastID).style.zIndex=""
}

lastID=id
}
// -->
</script>

<style type="text/css">
<!--
#d1{position:absolute; left:0px; top:0px; width:100px; height:100px; z-index:1; background-color:green}
#d2{position:absolute; left:20px; top:20px; width:100px; height:100px; z-index:2; background-color:yellow}
#d3{position:absolute; left:40px; top:40px; width:100px; height:100px; z-index:3; background-color:red}
#d4{position:absolute; left:60px; top:60px; width:100px; height:100px; z-index:4; background-color:blue}
-->
</style>

</HEAD>
<BODY>

<center>

<div style="position:relative;width:110px">

<div id="d1" onclick="changeZindex(this)">A</div>
<div id="d2" onclick="changeZindex(this)">B</div>
<div id="d3" onclick="changeZindex(this)">C</div>
<div id="d4" onclick="changeZindex(this)">D</div>

</div>

</center>
</BODY>
</HTML>

Отправлено: 00:41, 01-10-2009 | #2