Du kan kolla in den här koden. Jag skrev den för ett bra tag sedan så den är väl inte tip-top, men du kanske lär dig något utav den.
index.html
<html>
<head>
<title>Z-index</title>
<script src="Z-index.js" type="text/javascript">
</script>
<style type="text/css">
.element {
border: 1px solid #cccccc;
background-color: #eeeeee;
cursor: hand;
font-family: Verdana;
font-size: 8pt;
height:50px;
position: absolute;
text-align: center;
vertical-align: center;
width: 50px;
}
</style>
</head>
<body>
</body>
</html>
Z-index.js
/*
Window-selector 1.0
This script is written by Peter Wengelin, alias Cheguelin.
If you wan't to use this script on your website you'll
need my permission. Do not alter this text under any
circumstances. Do not share this script on your website.
*/
function createElements(n) {
for (var i = 0; i < n; i++) {
var element = document.createElement("div");
element.className = "element";
element.onmousedown = reOrganizeElements;
element.style.left = i * 15 + 10 + "px";
element.style.top = i * 15 + 10 + "px";
element.style.zIndex = element.innerText = i;
document.body.appendChild(element);
}
}
function reOrganizeElements() {
var clickedElement = event.srcElement;
var elements = document.getElementsByTagName("div");
var originalZIndex = clickedElement.style.zIndex;
var relevantElements = [];
for (var i = 0; i < elements.length; i++)
if (elements[i].className == "element")
relevantElements.push(elements[i]);
clickedElement.style.backgroundColor = "#993333";
clickedElement.style.borderColor = "#660000";
clickedElement.style.color = "#ffffff";
clickedElement.style.fontWeight = "bold";
clickedElement.style.zIndex = clickedElement.innerText
= relevantElements.length - 1;
for (var i = 0; i < relevantElements.length; i++)
if (relevantElements[i].style.zIndex >= originalZIndex
&& relevantElements[i] != clickedElement) {
relevantElements[i].style.backgroundColor = "";
relevantElements[i].style.borderColor = "";
relevantElements[i].style.color = "";
relevantElements[i].style.fontWeight = "";
relevantElements[i].style.zIndex =
relevantElements[i].style.zIndex - 1;
relevantElements[i].innerText =
relevantElements[i].style.zIndex;
}
}
/*
The push-method wich applies to the Array-object in
Internet Explorer 5.5 and later versions.
*/
if (!Array.prototype.push) {
Array.prototype.push = function() {
for (var i = 0; i < arguments.length; i++)
this[this.length] = arguments[i];
};
}
document.onselectstart = function() {
return false;
}
window.onload = function() {
createElements(4);
}