Notifikationer

Markér alle som læst Log ud

jesperbaldur Nybegynder

04. juni 2002 - 21:06 Der er 7 kommentarer og
2 løsninger

vise/skjule et layer

Hvis jeg har to knapper samt et layer i et document, hvordan er det så muligt at få layeret synligt når der trykkes på den ene knap og skjult når der trykkes på den anden???

Synes godt om

cdc Novice

04. juni 2002 - 21:28 #1

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

Synes godt om

knudgert Nybegynder

05. juni 2002 - 05:32 #2

<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.

Synes godt om

knudgert Nybegynder

05. juni 2002 - 08:09 #3

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>

Synes godt om

skovenborg Nybegynder

05. juni 2002 - 08:38 #4

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>

Synes godt om

pelkjaer Nybegynder

05. juni 2002 - 08:44 #5

<!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>

Synes godt om

knudgert Nybegynder

05. juni 2002 - 09:44 #6

>>>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...

Synes godt om

atn Nybegynder

05. juni 2002 - 21:06 #7

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 |****

Synes godt om

tmo Nybegynder

23. marts 2005 - 13:25 #8

lukker.

Synes godt om

tmo Nybegynder

23. marts 2005 - 13:25 #9

ups ;-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS