Avatar billede lassexxx3 Nybegynder
07. februar 2003 - 02:02 Der er 4 kommentarer og
2 løsninger

Mouseover problem med IE 6.0

Problemet er at i ie6 kan man ikke klikke på  undermenu-punkterne, markøren vil istedet for markere linksteksten, ikke så cool...

Endvidere ender dropdown menuen nedenunder hovedframen, er der nogen der har en løsning??

Og er det nødvendigt at lave browsertjek, eller er der en "helhedsløsning" der virker i de fleste browsere?

link: http://www.kulturcafeen.dk

Mvh Lasse
Avatar billede olebole Juniormester
07. februar 2003 - 02:50 #1
<ole>

Problemet er ikke specielt IE6-relateret ... den fungerer overhovedet ikke i NS6  :(

Prøv denne her, som kræver en transparent gif (img/t.gif):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>&nbsp;MenuTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="StyleSheet" href="" type="text/css">
<style type="text/css">
body {
    background-color: #000000;
    background-image: url(img/bg.gif);
    margin: 0px;
}
td, div {
    font-family: verdana;
    font-size: 10px;
}
#barTBL {
    position: absolute;
    top: 20px;
    width: 300px;
    z-index: 2
}
.menBar {
    height: 25px;
}
.menu {
    position: absolute;
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    z-index: 3;
    visibility: hidden;
}
a.barLink, a.menLink {
    background-color: #ffffff;
    color: #000000;
    text-decoration: none;
    text-align: center;
    border: 1px solid #c0c0c0;
    padding: 5px 0px;
    display: block;
    height: 12px;
}
a.barLink:visited, a.menLink:visited {
    background-color: #ffffff;
    color: #000000;
}
a.barLink:hover, a.menLink:hover {
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid #999999;
}
#hImg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    border: 0px none;
    visibilty: hidden;
    z-index: 1;
}
</style>
<script type="text/JavaScript">
var actM, d=document;
function getPos(elm) {
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}
function show( e ) {
    var oMen, pos, inx = e.id.split("L")[1];
    oMen = d.getElementById( "m"+inx );
    actM = oMen;
    hideAll();
    pos = getPos(e);
    oMen.style.left = pos.x;
    oMen.style.top = pos.y + e.offsetHeight;
    oMen.style.width = e.offsetWidth;
    oMen.style.visibility = "visible";
    d.getElementById("hImg").style.visibility = "visible";
}
function hide( e ) {
    e.style.visibility = "hidden";
}
function hideAll() {
    var mA = d.getElementsByTagName("DIV");
    for ( i=0; i<mA.length; i++ ) {
        if ( mA[i]!=actM && mA[i].className=="menu" ) hide( mA[i] );
    }
    d.getElementById("hImg").style.visibility = "hidden";
}
</script>
</head>
<body>

<table id="barTBL" cellspacing="0" cellpadding="0" border="0">
<tr>
    <td class="menBar"><a id="L0" href="#" class="barLink" onmouseover="show(this);">MenPunkt 1</a></td>
    <td class="menBar"><a id="L1" href="#" class="barLink" onmouseover="show(this);">MenPunkt 2</a></td>
    <td class="menBar"><a id="L2" href="#" class="barLink" onmouseover="show(this);">MenPunkt 3</a></td>
</tr>
</table>

<div class="menu" id="m0">
    <a href="#" class="menLink">MenLink 0.1</a>
    <a href="#" class="menLink">MenLink 0.2</a>
    <a href="#" class="menLink">MenLink 0.3</a>
    <a href="#" class="menLink">MenLink 0.4</a>
</div>
<div class="menu" id="m1">
    <a href="#" class="menLink">MenLink 1.1</a>
    <a href="#" class="menLink">MenLink 1.2</a>
    <a href="#" class="menLink">MenLink 1.3</a>
</div>
<div class="menu" id="m2">
    <a href="#" class="menLink">MenLink 2.1</a>
    <a href="#" class="menLink">MenLink 2.2</a>
    <a href="#" class="menLink">MenLink 2.3</a>
    <a href="#" class="menLink">MenLink 2.4</a>
    <a href="#" class="menLink">MenLink 2.5</a>
</div>
<img id="hImg" onmouseover="actM=false;hideAll();" src="img/t.gif">

</body>
</html>

/mvh
</bole>
Avatar billede miraculix Nybegynder
07. februar 2003 - 16:28 #2
Jeg tror dit problem er at du ikke giver din navbarmenu en bredde.

Prøv at skifte f.eks.:
menu = new NavBarMenu(55, 0);

ud med f.eks.:
menu = new NavBarMenu(55, 100);

Og se om ikke det hjælper lidt...
Avatar billede olebole Juniormester
08. februar 2003 - 16:05 #3
miraculix >> Koden er noget guddommeligt skrammel i det hele taget
/mvh
Avatar billede lassexxx3 Nybegynder
24. februar 2003 - 16:22 #4
koden er noget gudsjammerligt rod, så jeg vil gerne lige understrege igen at jeg ikke har lavet den, nok om det.

Løsningen var ganske enkelt at opdatere de to .js filer fra Brainjar.com.
Avatar billede lassexxx3 Nybegynder
24. februar 2003 - 16:24 #5
hva nu egentlig, kan man dele pointene ud til jer begge, eller hvad skal der ske?

Lasse
Avatar billede olebole Juniormester
24. februar 2003 - 16:43 #6
Først, når vi svarer  ;o)
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