Show/hide layer med Dropdown menu
jeg forsøger at få lavet en dropdown menu som skal vise mine skjulte layers, på den måde når man klikker på dropdown menuen kan man fx vælge side 2 og når man så klikker på den så skal det skjulte layer blive vist nedenunder..Min skjulte layers virker fint hvis jeg bruger link, det mere tricky er bare når jeg ska smide det ind i dropdownmenuen..
dropdown:
</head>
<form id="menu" action=""><p>
<select size="1" onchange="window.open(this.options[this.selectedIndex].value,'_self')">
<option selected="selected">Test</option>
<option value="#">Side 1</option>
<option value="#">Side 2</option>
</select>
</p></form>
skjulte layers:
<script language="JavaScript" s_rc="showhide.js">
function show_hide_layers() {
var i, visStr, args, theObj;
args = show_hide_layers.arguments;
for (i = 0; i < (args.length - 1); i += 2 ) {
theObj = args[i];
visStr = args[i+1];
if ( (navigator.appName == 'Netscape') && (document.layers != null) ) {
if (theObj){ theObj.visibility = visStr; }
} else if ( document.all != null ) {
if (visStr == 'show') { visStr = 'visible'; }
if (visStr == 'hide') { visStr = 'hidden'; }
if (theObj) { theObj.style.visibility = visStr; }
} else {
if (visStr == 'show') visStr = 'visible';
if (visStr == 'hide') visStr = 'hidden';
if (theObj) theObj.style.visibility = visStr;
}
}
}
function findLag( navn ) {
if (document.layers) return document.layers[navn];
if ( document.all ) return document.all[navn];
return document.getElementById(navn);
}; //end findLag( string )
function showLayer(n) {
show_hide_layers( findLag(n), 'show' );
}
function hideAllLayers() {
show_hide_layers( findLag('test1'),'hide', findLag('test2'),'hide', findLag('test3'),'hide', findLag('test4'),'hide' );
}
<div id="V-AC" style="position:absolute; left:425; top:230; width:150; height:25; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden">Fejl 1</div>
<div id="V-DC" style="position:absolute; left:425; top:230; width:150; height:25; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden">Fejl 2</div>
<div id="Ohm" style="position:absolute; left:425; top:230; width:150; height:25; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden">Fejl 3</div>
<div id="Cap" style="position:absolute; left:425; top:230; width:150; height:25; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden">Fejl 4</div>
<a href="java script:showLayer('test1')">Vis 1</a> |
<a href="java script:showLayer('test2')">Vis 2</a> |
<a href="java script:showLayer('test3')">Vis 3</a> |
<a href="java script:showLayer('test4')">Vis 4</a>
<br><br><br><br><br><br><br>
<a href="java script:hideAllLayers()">Nulstil</a><br />