Placering af billeder i menutræ

<ole>

Du kan ændre koden til noget à la:

<script language="JavaScript">
    function showMnu(id) {
        var styleCheck = document.getElementById("mnu" + id).style.display;
        //alert(styleCheck);
       
        if (styleCheck == "block") {
            document.getElementById("mnu" + id).style.display = "none";
        }
        if (styleCheck == "none") {
            document.getElementById("mnu" + id).style.display = "block";
        }
    }
</script>
<style type="text/css">
.menu-img {
    vertical-align: middle;
}
.line-img {
    vertical-align: middle;
    position: relative;
    top: -4px;
}
.menu-cont {
    font-family: verdana, arial, sans-serif;
    font-size: 9px;
    cursor: hand;
    cursor: pointer;
    padding-bottom: 3px;
}
.menu-cont div {
    margin-left: 3px;
    margin-top: 1px;
}
.menu-head {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    cursor: hand;
    cursor: pointer;
}
</style>

<div class="menu-head" onclick='showMnu(1);'><img src="head.gif" class="menu-img"> Hosting</div>
<div class="menu-cont" style="display:none" id='mnu1'>
    <div><img src="menulink.gif" class="line-img"> <img src="under.gif" class="menu-img"> undermeu</div>
    <div><img src="menulink.gif" class="line-img"> <img src="under.gif" class="menu-img"> undermenu</div>
    <div><img src="menulink.gif" class="line-img"> <img src="under.gif" class="menu-img"> undermenu</div>
</div>


<div class="menu-head" onclick='showMnu(2);'><img src="head.gif" class="menu-img"> Bestilling</div>
<div class="menu-cont" style="display:none" id='mnu2'>
    <div><img src="menulink.gif" class="line-img"> <img src="under.gif" class="menu-img"> undermeu</div>
    <div><img src="menulink.gif" class="line-img"> <img src="under.gif" class="menu-img"> undermeu</div>
</div>


<div class="menu-head" onclick='showMnu(3);'><img src="head.gif" class="menu-img"> Kontakt</div>
<div class="menu-cont" style="display:none" id='mnu3'>
    <div><img src="menulink.gif" class="line-img"> <img src="under.gif" class="menu-img"> undermeu</div>
    <div><img src="menulink.gif" class="line-img"> <img src="under.gif" class="menu-img"> undermeu</div>
</div>

/mvh
</bole>

For det første vil jeg anbefale at du laver billederne i samme størrelse. Det gør det nemmere at lave flere niveauer. Du skal så have lavet et billed med en lodret streg helt igennem og med en vandret streg på midden. Hvis du vil have flere niveauer skal du også have et helt blank billed, samt et med en lodret streg.

Nu har jeg forlænget menufile.gif og det ser nu ud som dette :)

www.dammoel.dk/test/lol.htm -
Nu vil jeg jo godt have at det kommer midt på hvordan gør vi deT =)))

Sætter det ind i en centreret div:

I style-sheetet:

html,body{height:100%,margin:0px;padding:0px;}
body{text-align:center;}
#centerDiv{margin:0px auto;}

-- og resten ind i div'en:

<div id="centerDiv">

...

</div>

naa det ikk lige det jeg mener... det er når du klikker, på et menu punkt, så kommer det andet billede ovenover stregen... Det skal være midt på... som www.dammoel.dk/test/test.gif

håber i kan se det jeg mener :P

www.dammoel.dk/test/test.jpg ;)

Sæt en negativ top på menu-img på samme måde som line-img !-)

Du har fået tegnet dine billeder forkert. Jeg har lavet en gif med de 4 billeder du skal bruge (kun træstruktur). Du skal bare klippe dem ud med en billededitor. De har størrelsen 14*14, så de er lidt størrer end dine, men det var lige den jeg havde liggende. Du skal kun bruge 2 af billederne hvis du ikke skal lave flere niveauer.
Gif'en kan hentes her:
http://212.242.79.97/treepic.gif

Smid et svar :)

svar.