,
  HTML KÓDY
Html kódy> Příklady kódů>Okno jako ve Windows

Okno jako ve Windows


(klikni za ZOBRAZIT)

Zobrazit

Okno X

A další text, blá, blá, blá...


zdroj:

<html>
<head>
<title>Okno</title>
<meta name="author" content="Jiří švácha">
<meta name="copyright" content="Jiří Švácha - www.svacha.webgarden.cz, www.html-kody.sweb.cz">
<style type="text/css">
.tabulka {
display:block;
position:absolute;
left:33%;
top:100;
background-color:#EEEEEE;
border-width:3px;
border-color:#225AD9;
border-style:solid;
width:350;
visibility: hidden;

}
.hlavicka{
width:280;
background-color:#1515A0;
color:white;
cursor:move;
onselectstart:return false;
}
.zavrit{
background-color:#DE4A21;
color:white;
border-width: 2px;
border-color: brown;
border-style:solid;
text-align:center;
cursor: pointer; cursor: hand;
font-family: arial;
}
body {background-color:#ECE9D8;
}
</style>

<script language="JavaScript">

function ap_getObj(name) {
if (document.getElementById)
return document.getElementById(name).style;
else
if (document.all)
return document.all[name].style;
else
if (document.layers)
return document.layers[name];
}

jestisknuto=false;

function Hlavicka_onMouseDown()
{
jestisknuto=true;
}

function PohybMysi(e){
if (jestisknuto)
{
if (navigator.appName=="Microsoft Internet Explorer" || navigator.appName=="Opera")
{
document.getElementById("tabulka").style.left=window.event.x-150;
document.getElementById("tabulka").style.top=window.event.y-15;
}

if (navigator.appName=="Netscape")
{
document.getElementById("tabulka").style.left=e.pageX-150;
document.getElementById("tabulka").style.top=e.pageY-15;
}
}
}

function UkonceniPresunu(){
jestisknuto=false;
if(document.getElementById("tabulka").style.left < "0" && document.getElementById("tabulka").style.left != "")
document.getElementById("tabulka").style.left = 0;
if(document.getElementById("tabulka").style.top < "0" && document.getElementById("tabulka").style.top != "")
document.getElementById("tabulka").style.top = 0;
}

function SkryjTabulku(){
document.getElementById('tabulka').style.visibility='hidden';
}

function ZobrazTabulku(){
document.getElementById('tabulka').style.visibility='visible';
return false;
}


function priradfunkce(){

var x = ap_getObj('tabulka');

document.onmouseup = UkonceniPresunu;
document.onmousemove = PohybMysi;
document.getElementById("ukaz").onclick = ZobrazTabulku;
document.getElementById("hlavicka").onmousedown = Hlavicka_onMouseDown;
document.getElementById("krizek").onclick = SkryjTabulku;
}
</script>
</head>
<body onload="priradfunkce()">
<a href="" id="ukaz" class="zobrazit" style="background-color:ivory; border-width:2px; border-color:black; border-style:solid; width:100%; visibility: visibli; text-align:center; font-family: arial;"><b>Zobrazit</b></a>

<table id="tabulka" class="tabulka" cellspacing="1">
<thead>
<tr>
<th id="hlavicka" class="hlavicka" onselectstart="return false">Okno</th>
<th id="krizek" class="zavrit" width="25" title="ZAVŘÍT">X</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2"><img src="b1.jpg" border="0" width="200" height="50"> <br> A další text, blá, blá, blá...<br></th>
</tr>
</tbody>
</table>

</body>
</html>