Avatar billede sqwer Nybegynder
12. juli 2001 - 21:18 Der er 11 kommentarer og
1 løsning

onMouseOut, men ikke out fra hvadsomhelst

Jeg har lavet en menu der vises i venstre side af skærmen, og som skal forsvinde når man flytter musen væk fra den, men jeg kan ikke få det til at fungere ordentligt.

Jeg har prøvet bare at lave noget lignende:
<A href=\"java script:void()\" onMouseOut=\"hideMenu()\"><TABLE>...</TABLE></A>
men så slår fra så snart musen fjernes fra noget som helst inde i tabellen, dvs. også links eller når man flytter mellem celler, og det dur jo ikke, den skal kun slå fra når musen flyttes helt ud.

Hvad skal jeg gøre?
Avatar billede olebole Juniormester
12. juli 2001 - 21:28 #1
<ole>
Vis os lige den kode, du har gang i  :)
/mvh
</bole>
Avatar billede olebole Juniormester
12. juli 2001 - 21:28 #2
...gerne med en URL til et oploaded eksempel.
Avatar billede sqwer Nybegynder
12. juli 2001 - 21:51 #3
Det her skulle vist nogenlunde illustrere problemet. Kan desværre ikke give et link :(.

<HEAD>
<SCRIPT language=\"JavaScript\">
<!--
var isnav, isie
var coll=\"\"
var styleobj=\"\"
var act=\"\", hi

if(parseInt(navigator.appVersion)>=4)
if(navigator.appName==\"Netscape\")
    isnav=true
else{
    isie=true
    coll=\"all.\"
    styleobj=\".style\"
}

function getobject(obj){
    var nostring
    if(typeof obj==\"string\"){
        nostring=eval(\"document.\"+coll+obj+styleobj)
    }
    else nostring=obj
    return nostring
}

function show(n){
    var obj=getobject(n)
    obj.visibility=\"visible\"
}

function hide(n){
    var obj=getobject(n)
    obj.visibility=\"hidden\"
}

function showMenu(){
    hide(\"tab\")
    show(\"menu\")
    act=\"menu\"
    ini()
}

function hideMenu(){
    hide(\"menu\")
    show(\"tab\")
    act=\"tab\"
    ini()
}


//-->
</SCRIPT>
<STYLE type=\"text/css\">
#tab      { position: absolute; left: 0px; top: 0px;
            visibility: hide; z-index: 5;}
#menu      {    position: absolute; left: 0px; top: 0px;
            width: 175px;
            visibility: hidden; z-index: 5;
            background-image: url(img/menu_baggr.gif);}
</STYLE>
</HEAD>
<BODY>

<DIV class=\"tab\" id=\"tab\" onMouseOver=\"showMenu()\"><IMG src=\"img/menu_fane.gif\"></DIV>

<DIV class=\"menu\" id=\"menu\"><A href=\"java script:void()\" onMouseOut=\"hideMenu()\">
<TABLE width=100% cellpadding=0 cellspacing=0>
<TR><TD><A href=\"link1.htm\">Link 1</A></TD></TR>
<TR><TD><A href=\"link2.htm\">Link 2</A></TD></TR>
</TABLE></A></DIV>

<SCRIPT language=\"JavaScript\">
<!--
var x = 0;
var y = 0;
var box

function ini(){
    if(act==\"tab\"){
        if(navigator.appName==\"Netscape\") box=document.tab;
        if(navigator.appVersion.indexOf(\"MSIE\")!=-1) box=document.all.tab.style;
    }
    if(act==\"menu\"){
        if(navigator.appName==\"Netscape\") box=document.menu;
        if(navigator.appVersion.indexOf(\"MSIE\")!=-1) box=document.all.menu.style;
    }
}

function redo(){    // places box in correct position
    if(navigator.appName==\"Netscape\"){
        box.visibility=\"hide\"
        box.top=window.pageYOffset
        box.left=window.pageXOffset
        box.visibility=\"show\"
    }
    if (navigator.appVersion.indexOf(\"MSIE\")!=-1){
        if (navigator.appVersion.indexOf(\"Mac\")==-1){
        //    box.display=\"none\";
            box.top=document.body.scrollTop;
            box.left=document.body.scrollLeft;
        //    box.display=\"\";
        }
    }
}

setInterval(\"redo()\",50);
//-->
</SCRIPT>

<SCRIPT language=\"JavaScript\">
<!--
act=\"tab\"
ini()
//-->
</SCRIPT>
</BODY>
Avatar billede blood Nybegynder
12. juli 2001 - 22:11 #4
<DIV class=\"menu\" id=\"menu\"><A href=\"java script:void()\" onMouseOver=\"showMenu()\" onMouseOut=\"hideMenu()\">
<TABLE width=100% cellpadding=0 cellspacing=0>
<TR><TD><A href=\"link1.htm\">Link 1</A></TD></TR>
<TR><TD><A href=\"link2.htm\">Link 2</A></TD></TR>
</TABLE></A></DIV>
Avatar billede roenving Novice
12. juli 2001 - 22:20 #5
Prøv at kigge på HierMenus:

http://www.webreference.com/dhtml/column56/

Den har godt nok som udgangspunkt at være fra en Frame, som ikke kan rumme den, menjeg mener at een af generationerne dækker det du vil -- els ska\' du bare flytte rundt på den!!

;-]
jes
Avatar billede olebole Juniormester
12. juli 2001 - 22:24 #6
<ole>
Læg \'tab\' i z-index:3, \'menu\' i z-index:2, og et lag ekstra - \'hideDiv\' - i z-index:1.

\'hideDiv\' indeholder en transparent gif, der fylder nok til at kunne ligge under \'tab\' og \'menu\' og samtidigt rage 20-30 pixels ud på alle sider af disse. Gif\'en er bare 1*1pixel og \'strækkes\' med width og height til laget fylder nok. Læg en border=1 på gif\'en...så kan du se, hvad der sker.

\'HideDiv\' er normalt hidden. Når \'menu\' vises, vises \'hideDiv\' også.

På gif\'en lægger du så en mouseover, der fyrer din \'hideMenu()\' af.
Til slut i denne funktion gemmer du så \'hideDiv\' igen.

Voila...den mest stensikre og X-browser / X-platforms kompatible måde at lave menuer på  =o)
/mvh
</bole>
Avatar billede roenving Novice
12. juli 2001 - 22:27 #7
>>> Ole
Du har garanteret helt ret, og hvis jeg selv skulle lave det, gad jeg sikkert også bruge tiden, meen gaaaaaab ;~p -- der skal da lige laves et par linier kode!!

jes
Avatar billede sqwer Nybegynder
12. juli 2001 - 22:37 #8
blood\'s svar virker fint, og er afgjort det nemmeste, takker for det.
olebole, din løsning ligner lidt noget jeg har prøvet, men som ikke altid ser hvis man fører musen hurtigt henover, kan det ikke passe?
Avatar billede blood Nybegynder
12. juli 2001 - 22:38 #9
Takker :o)
Avatar billede olebole Juniormester
12. juli 2001 - 22:42 #10
Du skal ændre til følgende:

<STYLE type=\"text/css\">
#tab      { position: absolute; left: 0px; top: 0px;
            visibility: hidden; z-index: 3;}
#menu      {    position: absolute; left: 0px; top: 0px;
            width: 175px;
            visibility: hidden; z-index: 2;
            background-image: url(img/menu_baggr.gif);}
#hideDiv      {    position: absolute; left: 0px; top: 0px;
            visibility: hidden; z-index: 1;}
</STYLE>

...og:

<DIV id=\"hideDiv\"><a href=\"java script:void(0)\" onMouseOver=\"hideMenu()\"><IMG src=\"img/trans.gif\" width=\"250\" height=\"200\" border=\"1\"></a></DIV>
<DIV class=\"tab\" id=\"tab\"><a href=\"java script:void(0)\" onMouseOver=\"showMenu()\"><IMG src=\"img/menu_fane.gif\" border=\"0\"></a></DIV>
<DIV class=\"menu\" id=\"menu\"><A href=\"java script:void()\" onMouseOut=\"hideMenu()\">
<TABLE width=100% cellpadding=0 cellspacing=0>
<TR><TD><A href=\"link1.htm\">Link 1</A></TD></TR>
<TR><TD><A href=\"link2.htm\">Link 2</A></TD></TR>
</TABLE></A></DIV>

...og:

function showMenu(){
    hide(\"tab\")
    show(\"menu\")
    show(\"hideDiv\")
    act=\"menu\"
    ini()
}

...og:

function hideMenu(){
    hide(\"menu\")
    hide(\"hideDiv\")
    show(\"tab\")
    act=\"tab\"
    ini()
}

Så kan du fiddle lidt med positionen af \'hideDiv\' i dine styles og bredde og højde på trans\'en. Det kan da ikke være nemmere  :)
/mvh
Avatar billede olebole Juniormester
12. juli 2001 - 22:45 #11
Nej, det er den eneste sikre og X-browser / X-platforms kompatible måde. Den er simpel og kanon stabil.
Eeehhhh....du ved godt, NS4.x foreksempel slet ikke tager mouseevents på lag, ikke? Så er der jo bunker af overflødig kode i dit script...alt det, der tager højde for NS  :o)
/mvh
Avatar billede olebole Juniormester
12. juli 2001 - 22:48 #12
Iøvrigt er det mildt sagt ikke efter standarden at lægge en tabel ind i et link  :oD
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester