Show / Hide table

here you go:

<html>
<head>
<title>Menu</title>
    <script language="JavaScript">
        function showOptions(id) {
        var styleCheck = document.getElementById("show" + id).style.display;
        if (styleCheck == "inline") {
            document.getElementById("show" + id).style.display = "none";
        }
        if (styleCheck == "none") {
            document.getElementById("show" + id).style.display = "inline";
        }
        }
    </script>
<style type="text/css">
A.menu { font-family: "Trebuchet MS"; font-size: 10pt; font-weight : bold;
border-top: 1px solid #586E7A; border-bottom: 1px solid #586E7A;
color: #FFFFFF; width: 150; text-decoration: none }
A.menu:hover { background: #FFFFFF; color: #000000; border: 1px solid #000000; text-decoration: none }
A.menu:link { text-decoration: none }
</style>

</head>
<body>
<br>
<br>
<br>
<a href=""><img src="menuknap.gif" height="10" width="100" border="0"></a>
<br>


<div align="center" style="Cursor:Hand;" OnClick="showOptions(1);"><strong>Vis / skjul</strong></div>
<div style="display: none;" id="show1">

<!-- Denne table skal komme frem over billede -->
<table border="0" width="150" cellspacing="3" cellpadding="3" bgcolor="#000000">
<tr><td bgcolor="#586E7A">
<a href="" class="menu">&nbsp;link 1</a><br>
<a href="" class="menu">&nbsp;link 2</a><br>
<a href="" class="menu">&nbsp;link 3</a><br>
<a href="" class="menu">&nbsp;link 4</a><br>
<a href="" class="menu">&nbsp;link 5</a><br>
</td></tr></table>
</div>

</body>
</html>


//>Rune

Ja men det skal under et billede og så må den forsvende når man ikke peger på den mere.

? hvad mener du?

//>Rune

ja det er ikke til at fåstå ;-)

table skal forsvende når man klikker ved siden af den.

ligesom menu - filer

well, det var jo ik' hvad spørgsmålet gik ud på!

-jeg kan desvære heller ik'lave det med at den skal forsvinde når du klikker ved siden af..!

//>Rune

eller ved nærmere eftertanke.. :

<html>
<head>
<title>Menu</title>
    <script language="JavaScript">
        function showOptions(id) {
        var styleCheck = document.getElementById("show" + id).style.display;
        if (styleCheck == "inline") {
            document.getElementById("show" + id).style.display = "none";
        }
        if (styleCheck == "none") {
            document.getElementById("show" + id).style.display = "inline";
        }
        }
    </script>
<style type="text/css">
A.menu { font-family: "Trebuchet MS"; font-size: 10pt; font-weight : bold;
border-top: 1px solid #586E7A; border-bottom: 1px solid #586E7A;
color: #FFFFFF; width: 150; text-decoration: none }
A.menu:hover { background: #FFFFFF; color: #000000; border: 1px solid #000000; text-decoration: none }
A.menu:link { text-decoration: none }
</style>

</head>
<body>
<br>
<br>
<br>
<a href=""><img src="menuknap.gif" height="10" width="100" border="0" OnMouseOver="showOptions(1);" OnMouseOut="showOptions(1);"></a>
<br>

<div style="display: none;" id="show1">

<!-- Denne table skal komme frem over billede -->
<table border="0" width="150" cellspacing="3" cellpadding="3" bgcolor="#000000">
<tr><td bgcolor="#586E7A">
<a href="" class="menu">&nbsp;link 1</a><br>
<a href="" class="menu">&nbsp;link 2</a><br>
<a href="" class="menu">&nbsp;link 3</a><br>
<a href="" class="menu">&nbsp;link 4</a><br>
<a href="" class="menu">&nbsp;link 5</a><br>
</td></tr></table>
</div>

</body>
</html>

//>Rune

Jeg har fået det til at funke.

Tak for hjælpen.

kan jeg ik' prøve at se hvad du gjorde?

Thx 4 Poinz
//>Rune

Jo jeg har lavet om på showOptions(id,val)


<html>
<head>
<title>Menu</title>
    <script language="JavaScript">
        function showOptions(id,val) {
        var styleCheck = document.getElementById("show" + id).style.display;
        if (val == "0") {
            document.getElementById("show" + id).style.display = "none";
        }
        if (val == "1") {
            document.getElementById("show" + id).style.display = "inline";
        }
        }
    </script>
<style type="text/css">
A.menu { font-family: "Trebuchet MS"; font-size: 10pt; font-weight : bold;
border-top: 1px solid #586E7A; border-bottom: 1px solid #586E7A;
color: #FFFFFF; width: 150; text-decoration: none }
A.menu:hover { background: #FFFFFF; color: #000000; border: 1px solid #000000; text-decoration: none }
A.menu:link { text-decoration: none }
</style>

</head>
<body>
<br>
<br>
<br>
<img src="menuknap.gif" height="10" width="100" border="0" OnClick="showOptions(1,1);">
<br>

<div style="display: none;" id="show1">

<!-- Denne table skal komme frem over billede -->
<table border="0" width="150" cellspacing="3" cellpadding="3" bgcolor="#000000" OnMouseOver="showOptions(1,1);">
<tr><td bgcolor="#586E7A" OnClick="showOptions(1,0);" OnMouseOut="showOptions(1,0);">
<a href="1" class="menu">&nbsp;link 1</a><br>
<a href="2" class="menu">&nbsp;link 2</a><br>
<a href="3" class="menu">&nbsp;link 3</a><br>
<a href="4" class="menu">&nbsp;link 4</a><br>
<a href="5" class="menu">&nbsp;link 5</a><br>
</td></tr></table>
</div>
</body>
</html>

Hmmm.. smart! :-)

//>Rune