Pagina 1 din 1
AJAX onMouseOver
#1
Scris 02 December 2007 - 05:43 AM
Fratilor sunt incepator in ce priveste AJAX. Incerc sa-l invat si nu sa copii de pe internet. vreau sa fac un meniu pt pagina mea dar m-am blocat la functia onMouseOver, pt ca nu stiu cum sa fac ca meniul drop down(HV menu) sa dipara dupa ce iau mouse-ul.
Codu e acesta:
<html>
<head>
<title>
HV menu
</title>
<style type='text/css'>
div#menuTop1
{
border: 2px solid black;
width: 150px;
}
div#dropDown1
{
visibility: hidden;
width: 150px;
}
.subItem
{
text-align: center;
margin-bottom: 1px;
}
.subItem a
{
background: blue;
text-decoration: none;
display: block;
font-weight: bold;
border: blue;
color: white;
}
.subItem a:active
{
border: gray;
}
.subItem a:hover
{
background:gray;
color: #000000;
width: 150px;
}
div#showInRight
{
position: absolute;
top: 30px;
left: 150px;
width: 150px;
z-index: 20;
visibility: hidden;
}
</style>
<script language='javascript'>
function hideMenus()
{
document.getElementById('dropDown1').style.visibility='hidden';
}
function hideSubMenu()
{
document.getElementById('showInRight').style.visibility='hidden';
}
// the show menu function takes one argument which is the menu to be shown
function showMenu(sm)
{
document.getElementById(sm).style.visibility='visible';
}
</script>
</head>
<body>
<div id='menuTop1' onMouseOver="showMenu('dropDown1');">
Start Here
</div>
<div id='dropDown1'>
<div id='sub1-1' class='subItem' onClick="hideMenus();" onMouseOver="showMenu('showInRight');"><a href='#'>link1</a></div>
<div id='sub1-2' class='subItem' onClick="hideMenus();"><a href='#'>link2</a></div>
<div id='sub1-3' class='subItem' onClick="hideMenus();"><a href='#'>link3</a></div>
<div id='sub1-4' class='subItem' onClick="hideMenus();"><a href='#'>link4</a></div>
<div id='sub1-5' class='subItem' onClick="hideMenus();"><a href='#'>link5</a></div>
</div>
<div id="showInRight" onblur="hideSubMenu();" >
<div id='sub1-1-1' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-1</a></div>
<div id='sub1-1-2' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-2</a></div>
<div id='sub1-1-3' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-3</a></div>
<div id='sub1-1-4' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-4</a></div>
</div>
</body>
</html>
Are cineva vreo idee?
Codu e acesta:
<html>
<head>
<title>
HV menu
</title>
<style type='text/css'>
div#menuTop1
{
border: 2px solid black;
width: 150px;
}
div#dropDown1
{
visibility: hidden;
width: 150px;
}
.subItem
{
text-align: center;
margin-bottom: 1px;
}
.subItem a
{
background: blue;
text-decoration: none;
display: block;
font-weight: bold;
border: blue;
color: white;
}
.subItem a:active
{
border: gray;
}
.subItem a:hover
{
background:gray;
color: #000000;
width: 150px;
}
div#showInRight
{
position: absolute;
top: 30px;
left: 150px;
width: 150px;
z-index: 20;
visibility: hidden;
}
</style>
<script language='javascript'>
function hideMenus()
{
document.getElementById('dropDown1').style.visibility='hidden';
}
function hideSubMenu()
{
document.getElementById('showInRight').style.visibility='hidden';
}
// the show menu function takes one argument which is the menu to be shown
function showMenu(sm)
{
document.getElementById(sm).style.visibility='visible';
}
</script>
</head>
<body>
<div id='menuTop1' onMouseOver="showMenu('dropDown1');">
Start Here
</div>
<div id='dropDown1'>
<div id='sub1-1' class='subItem' onClick="hideMenus();" onMouseOver="showMenu('showInRight');"><a href='#'>link1</a></div>
<div id='sub1-2' class='subItem' onClick="hideMenus();"><a href='#'>link2</a></div>
<div id='sub1-3' class='subItem' onClick="hideMenus();"><a href='#'>link3</a></div>
<div id='sub1-4' class='subItem' onClick="hideMenus();"><a href='#'>link4</a></div>
<div id='sub1-5' class='subItem' onClick="hideMenus();"><a href='#'>link5</a></div>
</div>
<div id="showInRight" onblur="hideSubMenu();" >
<div id='sub1-1-1' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-1</a></div>
<div id='sub1-1-2' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-2</a></div>
<div id='sub1-1-3' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-3</a></div>
<div id='sub1-1-4' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-4</a></div>
</div>
</body>
</html>
Are cineva vreo idee?
#2
Scris 02 December 2007 - 09:06 AM
nu exista cumva un eveniment separat, onMouseOut sau ceva asemanator?
#4
Scris 03 December 2007 - 12:33 AM
Hmm.
Acu', din ce-mi amintesc .. onClick se refera la momentul cand userul apasa butonul mausului (deci e compus din onButtonDown si onButtonUp - sau ceva de genul asta). Tie-ti trebuie un event pentru momentul cand userul a scos sageata de pe meniu
Then again, cu ce se mananca Ajax ala?
Acu', din ce-mi amintesc .. onClick se refera la momentul cand userul apasa butonul mausului (deci e compus din onButtonDown si onButtonUp - sau ceva de genul asta). Tie-ti trebuie un event pentru momentul cand userul a scos sageata de pe meniu
Then again, cu ce se mananca Ajax ala?
#6
Scris 03 December 2007 - 01:03 AM
In linii mari AJAX (Asyncronimous Javascript And Xml) permite sa faci o cerere catre server fara sa reincarci pagina
#7
Scris 03 December 2007 - 02:00 AM
Multumesc celor care incearca sa ma ajute dar astept si raspunsul celor care stiu despre ce vorbesc. Am vazut ca sunt cativa pe aici care se pricep dar poate acum sunt ocupati cu lucruri mai serioase decat onMouseOut-ul meu.
.
O sa mai intreb si pe altii ca vreau sa invat si nu sa copii de pe net gata facut.(acum cat am timp
)
O sa mai intreb si pe altii ca vreau sa invat si nu sa copii de pe net gata facut.(acum cat am timp
#8
Scris 03 December 2007 - 10:06 AM
Eu cred ca tu confunzi, ca asta nu este AJAX... in fine
Ar trebui ca meniurile sa isi cuprinda submeniurile; Eu as face ceva in genul:
Ar trebui ca meniurile sa isi cuprinda submeniurile; Eu as face ceva in genul:
<div id='menuTop1' onMouseOver="showMenu('dropDown1');" onMouseOut="hideMenus();">Start Here
<div id='dropDown1'>
<div id='sub1-1' class='subItem' onClick="hideMenus();" onMouseOver="showMenu('showInRight');"><a href='#'>link1</a>
<div id="showInRight">
<div id='sub1-1-1' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-1</a></div>
<div id='sub1-1-2' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-2</a></div>
<div id='sub1-1-3' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-3</a></div>
<div id='sub1-1-4' class='subItem' onClick="hideSubMenu();"><a href='#'>link1-4</a></div>
</div>
</div>
<div id='sub1-2' class='subItem' onClick="hideMenus();"><a href='#'>link2</a></div>
<div id='sub1-3' class='subItem' onClick="hideMenus();"><a href='#'>link3</a></div>
<div id='sub1-4' class='subItem' onClick="hideMenus();"><a href='#'>link4</a></div>
<div id='sub1-5' class='subItem' onClick="hideMenus();"><a href='#'>link5</a></div>
</div>
</div>
Aceasta postare a fost editata de Argv: 03 December 2007 - 10:07 AM
Impartaseste acest subiect:
Pagina 1 din 1
Subiecte similare
| Topic | Deschis de | Replici | Vizualizari | |
|---|---|---|---|---|
|
cateva intrebari | Dennys08 | 0 | 938 |
|
Web design
HTML, CSS, ETC... |
Homer | 1 | 4.345 |
|
Vand site
www.eurofirme.com |
fvf77 | 1 | 2.642 |
|
Am o problema la chat
Chat |
andyhardy3 | 0 | 941 |
|
(Poate) Vind Domenii
Astept oferte serioase! |
Jugulator | 0 | 3.198 |
Contact
Facebook
Twitter
RSS














