Notifikationer

Markér alle som læst Log ud

pfp Nybegynder

02. december 2003 - 18:44 Der er 8 kommentarer og
1 løsning

Vi skjul et layer

Hej,

Jeg har følgende HTML-dokument:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Layer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="100%" border="0">
<tr>
<td width="35%"><input type="text" name="textfield"></td>
<td width="65%"><img src="help.gif" alt="" width="15" height="15"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Jeg kunne godt tænke mig at lave sådan at når man klikker på billedet "help.gif" så vises der et lille layer med noget tekst. Der skal også være mulighed for at at lukke layeret igen.

Altså ligesom når man klikker på et brugernavn i et indlæg her på eksperten.dk

Hvordan kan man lave det med CSS (og skal der evt. blandes noget javascript ind i det)?

Det er rimeligt vigtig at det er nogenlunde cross-browser..

/pfp

Synes godt om

pfp Nybegynder

02. december 2003 - 18:45 #1

hmmm, lidt hurtig med overskriften. Det skulle selvfølgelig være "Vis/skjul et layer"

Synes godt om

7th Praktikant

02. december 2003 - 18:52 #2

http://www.udvikleren.dk/article.php?techid=9&aid=160

Synes godt om

Slettet bruger

02. december 2003 - 18:52 #3

Har dette liggende, leg selv videre:

<table align="center" width="100%" cellspacing="2" cellpadding="0" border="0">
<tr><td width="200" align="right"><b>TRACKS PÅ CD 1:</b> </td><td><a href="#" onClick="document.getElementById('tekst1').style.display = (document.getElementById('tekst1').style.display == 'none') ? 'block' : 'none';return false;">Vis/skjul felter</a></td></tr>
</table>
<div id="tekst1" style="display: none;">
<table align="center" width="100%" cellspacing="2" cellpadding="0" border="0">
<tr><td align="right" width="200" nowrap><b>Track 01:</b></td><td width="100%"><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 02:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 03:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 04:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 05:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 06:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 07:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 08:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 09:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 10:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 11:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 12:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 13:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 14:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 15:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 16:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 17:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 18:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 19:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
<tr><td align="right"><b>Track 20:</b></td><td><input type="text" name="cd1[]" style="width:80%"></td></tr>
</table>
</div>

Synes godt om

pfp Nybegynder

02. december 2003 - 18:55 #4

7th -> Det skal blive oppe når man klikker på det indtil man lukker det igen, eller klikker på en anden knap der åbner et nyt layer.

elbarto -> jeg kigger lige på dit...

Synes godt om

pfp Nybegynder

02. december 2003 - 19:02 #5

elbarto -> Dit ser for så vidt fint ud. Jeg har prøvet at lave det her med 2 forskellige lag og 2 forskellige links:
<html>
<head>
<title>Vis og skjul layers</title>
</head>
<body>
<table align="center" width="100%" cellspacing="2" cellpadding="0" border="0">
<tr><td width="200" align="right"><b>TRACKS PÅ CD 1:</b> </td><td><a href="#" onClick="document.getElementById('1').style.display = (document.getElementById('1').style.display == 'none') ? 'block' : 'none';return false;">Vis/skjul felter</a></td></tr>
<tr>
<td align="right">sadasdasd</td>
<td><a href="#" onClick="document.getElementById('2').style.display = (document.getElementById('2').style.display == 'none') ? 'block' : 'none';return false;">Vis/skjul felter</a></td>
</tr>
</table>
<div id="1" style="display: none;">
etteren
</div>
<div id="2" style="display: none;">
toeren
</div>
</body>
</html>

Kan det ikke udvides så så "etteren" lukkes når "toeren" åbnes..?

Synes godt om

pfp Nybegynder

02. december 2003 - 19:02 #6

Desuden kunne jeg også godt tænke mig at styre hvor lagene blev vist. Jeg kunne godt tænke mig at de blev vist lige ved siden at det link der fremkalder det.

Synes godt om

gil-galad Nybegynder

02. december 2003 - 19:16 #7

http://www.eksperten.dk/spm/433296

Synes godt om

pfp Nybegynder

02. december 2003 - 20:10 #8

spiffsen -> Det kan jeg ikke helt se hvordan jeg skal bruge. Jeg vil jo gerne have den til at "floate" ved sidden af min knap...

Synes godt om

pfp Nybegynder

06. januar 2004 - 00:23 #9

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 HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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