Yksinkertainen ikkunointijärjestelmä.
Tässä esimerkissä ikkunat piirtyvät täysin samankokoisina samaan kohtaan päällekkäin, eli alussa näet vain yhden ikkunan kunnes liikutat sitä raahaamalla yläreunasta.
<html>
<head>
<style type="text/css">
.ikkuna {
background-color:grey;
position:absolute;
top:45%;
right:45%;
width:500px;
height:300px;
padding-top:20px;
z-index:1;
border-width:1px;
border-color:black;
border-style:solid;
overflow:scroll;
}
.nauha {
position:absolute;
top:0;
left:0;
background-color:blue;
height:20px;
width:100%;
text-align:right;
}
</style>
<script type="text/javascript">
var painanu;
var ikkuna;
var z=1;
function leveys(ikkuna)
{
x = document.getElementById(ikkuna);
return (x.offsetWidth)/2;
}
function liikuta(event, ikkuna) {
if(painanu=='1'){
document.getElementById(ikkuna).style.left=event.clientX-leveys(ikkuna)+'px';
document.getElementById(ikkuna).style.top=event.clientY-10+'px';
}
}
function painanut(id) {
painanu='1';
ikkuna=id;
document.getElementById(id).style.zIndex = z++;
}
</script>
</head>
<body onmousemove="liikuta(event, ikkuna)">
<div id="ikkuna" class="ikkuna">
<div class="nauha" onmousedown="painanut('ikkuna')" onmouseup="painanu='0'">
<span onclick="document.getElementById(ikkuna).style.display='none';">[X]</span></div>
Ikkunan sisältö
</div>
<div id="toinenikkuna" class="ikkuna">
<div class="nauha" onmousedown="painanut('toinenikkuna')" onmouseup="painanu='0'">
<span onclick="document.getElementById(ikkuna).style.display='none';">[X]</span></div>
Toisen ikkunan sisältö
</div>
<div id="kolmasikkuna" class="ikkuna">
<div class="nauha" onmousedown="painanut('kolmasikkuna')" onmouseup="painanu='0'">
<span onclick="document.getElementById(ikkuna).style.display='none';">[X]</span></div>
Kolmannen ikkunan sisältö
</div>
</body>
</html>Aihe on jo aika vanha, joten et voi enää vastata siihen.