Группа 43

Простой примерчик:

<html>

<head>

<title>Layers</title>

<style type="text/css">

#lay1{

position:absolute;

top:100px;

left:100px;

visibility:visible;

background-color:yellow;

width:100px;

border:solid black 1px;

}

</style>

<script languare="JavaScript">

function show2()

{

if(document.getElementById("lay1").style.visibility=="hidden")

{

document.getElementById("lay1").style.visibility="visible";

document.getElementById("bt1").value="Спрятать";

}

else

{

document.getElementById("lay1").style.visibility="hidden";

document.getElementById("bt1").value="Показать";

}

}

function show0(){

document.getElementById("lay1").style.visibility="visible";

document.getElementById("bt1").value="Спрятать";

}

function show1(){

document.getElementById("lay1").style.visibility="hidden";

document.getElementById("bt1").value="Показать";

}

</script>

</head>

<body>

<div id="lay1">Слой</div>

<form name="frm1">

<input type="button" value="Спрятать" id="bt1" onclick="show2()">

<a href='#' onMouseover='show0()' onMouseout='show1()'>cghznfnm</a>

</form>

</body>

</html>

* * *

 

Полноценное выдвижное меню.

<html>

<head>

<title>Layers</title>

<style type="text/css">

#lay1{

position:absolute;

top:15px;

left:65px;

visibility:visible;

background-color:yellow;

width:150px;

border:solid black 1px; }

#lay2{

position:absolute;

top:15px;

left:195px;

visibility:visible;

background-color:#0f0;

width:150px;

border:solid black 1px; }

#lay3{

position:absolute;

z-index:-1;

top:0px;

left:0px;

visibility:visible;

background-color:#fff;

width:200px;

height:200px;

border:solid black 0px; }

#lay4{

position:absolute;

top:35px;

left:195px;

visibility:visible;

background-color:#f00;

width:150px;

border:solid black 1px; }

</style>

<script languare="JavaScript">

function show2(n,m){

document.getElementById("lay"+n).style.visibility="visible";

document.getElementById("lay"+m).style.visibility="hidden"; }

function show3(){

document.getElementById("lay2").style.visibility="hidden";

document.getElementById("lay4").style.visibility="hidden"; }

function show0(){

document.getElementById("lay1").style.visibility="visible"; }

function show1(){

document.getElementById("lay1").style.visibility="hidden";

document.getElementById("lay2").style.visibility="hidden";

document.getElementById("lay4").style.visibility="hidden"; }

</script>

</head>

<body>

<div id="lay3" onMouseover='show1()' onMouseout=''>&nbsp;</div>

<div id="lay1"onMouseout=''>

<a href='#' onMouseover='show2(2,4)'>Слой2</a><br>

<a href='#' onMouseover='show2(4,2)'>Слой4</a><br>

<a href='#' onMouseover='show3()'>Слой1</a>

</div>

<div id="lay2" onMouseover='' onMouseout='show1()'>Слой2</div>

<div id="lay4" onMouseover='' onMouseout='show1()'>Сло4</div>

<form name="frm1">

<a href='#' onMouseover='show0()' onMouseout=''>cghznfnm</a>

</form>

</body>

</html>

 

 

© gruppa-43im2009
Конструктор сайтов - uCoz