vise/skjule et layer

Se på denne, den er bygget op i css og div/layers, men linksene kan bare skiftes ud med billeder. Før musen over referencer.
http://hjem.get2net.dk/arntsen/eksperten/menu/top_menu_02.htm

/cdc

<HTML><HEAD>
<TITLE> Vis/gem</TITLE>
<SCRIPT LANGUAGE="JavaScript">
show = 0
function vis(i){
if (show>0) gem(show)
show = i

if (document.layers)
  document.layers["image"+i].visibility='show';
else
  document.all["image"+i].style.visibility='visible';
}
function gem(i){
if (document.layers)
  document.layers["image"+i].visibility='hide';
else
  document.all["image"+i].style.visibility='hidden';
}
</SCRIPT>
</STYLE>
</HEAD>
<BODY>
<A HREF="#" onClick="vis(1)">vis1</A>
<A HREF="#" onClick="gem(1)">gem1</A>
<A HREF="#" onClick="vis(2)">vis2</A>
<A HREF="#" onClick="gem(2)">gem2</A>
<A HREF="#" onClick="vis(3)">vis3</A>
<A HREF="#" onClick="gem(3)">gem3</A>

<DIV ID="image1" style="position : absolute; left : 260px; top :50px;
visibility:hidden;">TEKST 1</DIV>
<DIV ID="image2" style="position : absolute; left : 120px; top :
110px; visibility:hidden">TEKST 2</DIV>
<DIV ID="image3" style="position : absolute; left:280; top:60;
visibility:hidden;">TEKST 3</DIV>
</BODY>
</HTML>

Teksten kan du jo bare skifte ud med en knap efter ønske.

Brug denne istedet for, så får du også Netscape 6.+ og Opera med.

<HTML><HEAD>
<TITLE> Vis/gem</TITLE>
<SCRIPT LANGUAGE="JavaScript">
show = 0
function vis(i){
if (show>0) gem(show)
show = i

if (document.layers)
  document.layers["image"+i].visibility='show';
else if (document.all)
  document.all["image"+i].style.visibility='visible';
else if (document.getElementById)
  document.getElementById("image"+i).style.visibility='visible';
}
function gem(i){
if (document.layers)
  document.layers["image"+i].visibility='hide';
else if (document.all)
  document.all["image"+i].style.visibility='hidden';
else if (document.getElementById)
  document.getElementById("image"+i).style.visibility='hidden';
}
</SCRIPT>
</STYLE>
</HEAD>
<BODY>
<A HREF="#" onClick="vis(1)">vis1</A>
<A HREF="#" onClick="gem(1)">gem1</A>
<A HREF="#" onClick="vis(2)">vis2</A>
<A HREF="#" onClick="gem(2)">gem2</A>
<A HREF="#" onClick="vis(3)">vis3</A>
<A HREF="#" onClick="gem(3)">gem3</A>

<DIV ID="image1" style="position : absolute; left : 260px; top :50px;
visibility:hidden;">TEKST 1</DIV>
<DIV ID="image2" style="position : absolute; left : 120px; top :
110px; visibility:hidden">TEKST 2</DIV>
<DIV ID="image3" style="position : absolute; left:280; top:60;
visibility:hidden;">TEKST 3</DIV>
</BODY>
</HTML>

Denne her virker også i Netscape (document.all virker desværre kun i IE):
<html>
<head>
<script language="javascript">
function vis()
{
document.getElementById("navn").style.visibility = "visible";
}
function skjul()
{
document.getElementById("navn").style.visibility = "hidden";
}
</script>
</head>
<body>
<div id="navn" style="visibility:hidden;">
LAYER
</div>
<br>
<input type="button" onClick="vis();" value="VIS">
<input type="button" onClick="skjul();" value="SKJUL">
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#lag00 {
    color: #000000;
    background-color: #CCCCCC;
    z-index: 1;
}

#lag01 {
    color: #000000;
    background-color: #CCCCCC;
    z-index: 2;
}

#lag02 {
    color: #000000;
    background-color: #CCCCCC;
    z-index: 3;
}
</style>
<script type="text/javascript">
function findObj(theObj, theDoc)
{
  var p, i, foundObj;
 
  if(!theDoc) theDoc = document;
  if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
  {
    theDoc = parent.frames[theObj.substring(p+1)].document;
    theObj = theObj.substring(0,p);
  }
  if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
  for (i=0; !foundObj && i < theDoc.forms.length; i++)
    foundObj = theDoc.forms[i][theObj];
  for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
    foundObj = findObj(theObj,theDoc.layers[i].document);
  if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
 
  return foundObj;
}

function showHideLayers()
{
  var i, visStr, obj, args = showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3)
  {
    if ((obj = findObj(args[i])) != null)
    {
      visStr = args[i+2];
      if (obj.style)
      {
        obj = obj.style;
        if(visStr == 'show') visStr = 'visible';
        else if(visStr == 'hide') visStr = 'hidden';
      }
      obj.visibility = visStr;
    }
  }
}
</script>
</head>
<body>

<div id="lag00" style="visibility:visible">Dette lag er synligt når siden loades</div>
<div id="lag01" style="visibility:hidden">Dette lag vises i stedet ved onclick01</div>
<div id="lag02" style="visibility:hidden">Dette lag vises i stedet ved onclick02</div>

<span>
<a href="java script:;" onclick="showHideLayers('lag01','','show','lag00','','hide','lag02','','hide');">Vis layer 01</a><br>
<a href="java script:;" onclick="showHideLayers('lag02','','show','lag00','','hide','lag01','','hide');">Vis layer 02</a>
</span>
<p>Osv. osv. osv.</p>

</body>
</html>

>>>skovenborg Denne her virker også i Netscape (document.all virker desværre kun i IE)

Det gør min rettede version også, til gengæld vil din ikke virke i tidl. versioner af IE og Netscape 4, det gør min...

Heysa !

Så simpelt...

Venligst

<ATN/>

*****| Code Start |*****
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Show And Hide Layer</title>
    <style type="text/css">
    * { font-family : verdana,tahoma; font-size : 12px;    }
    </style>
</head>
<body>
<script language="javascript" type="text/javascript">
var ie4 = (document.all)?1:0;
var ns4 = (document.layers)?1:0;
var dom = (document.getElementById)?1:0;

function toggleLyr(sLyrName,sState) {
    var objLyr =
        (ie4)?document.all[sLyrName]:
        (ns4)?document.layers[sLyrName]:
        (dom)?document.getElementById(sLyrName):0;
       
        objLyr.style.visibility = sState;
}
</script>
<span id="layer" style="border:1px solid #000000;position:absolute;top:100px;left:200px;">
<table border="0" cellpadding="0" cellspacing="0" width="200" height="200">
<tbody>
    <tr>
        <td align="center" valign="middle" bgcolor="#cccccc"><b>SÅDAN</b></td>
    </tr>
</tbody>
</table>
</span>
<input type="button" onclick="toggleLyr('layer','visible')" value=" Synlig "/>
<input type="button" onclick="toggleLyr('layer','hidden')" value=" uSynlig "/>
</body>
</html>
****| Code End |****

lukker.

ups ;-)