Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Info box bij link

5 antwoorden
  • [code:1:27fbdac5fc]<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript"> function showFeedback(identifier) { document.getElementById(identifier).style.display = "block"; } function hideFeedback(identifier) { document.getElementById(identifier).style.display = "none"; } window.onload = function(){ hideFeedback(); } </script> </head> <body> <li><a href="#" onMouseOver="showFeedback('opdracht1');">opdracht1</a></li> <li><a href="#" onMouseOver="showFeedback('opdracht2');">opdracht2</a></li> <li><a href="#" onMouseOver="showFeedback('opdracht3');">opdracht3</a></li> <li><a href="#" onMouseOver="showFeedback('opdracht4');">opdracht4</a></li> <div id="feedback"> <span id="opdracht1">informatie over opdracht1</span> <span id="opdracht2">informatie over opdracht2</span> <span id="opdracht3">informatie over opdracht3</span> <span id="opdracht4">informatie over opdracht4</span> </div> </body> </html>[/code:1:27fbdac5fc] Ik ben bezig om een soort van informatie schermpje te maken waarin informatie komt te staan over bepaalde opdrachten. Ik kom hierbij 2 problemen tegen: probleem 1: Wanneer ik over een link van een opdracht heen ga moet deze blijven staan, en pas verdwijnen wanneer ik over de volgende opdracht heen ga. probleem 2: Ik heb een aantal pagina's met telkens een variabel aantal opdrachten, ik wil niet alle opdrachten als identifier in de functie hideFeedback() plaatsen, dit om onoverzichtelijkheid te verkomen (er staat tenslotte al 2x een lijst, 1x met links en 1x met teksten). De box Feedback zelf blijft gewoon in beeld, alleen de span's met tekst worden zichtbaar/onzichtbaar gemaakt. Heerft iemand een goed idee ? -marcel
  • Ik weet niet of dit al jouw problemen oplost, maar toen ik jouw code zag dacht ik aan een definition list: [code:1:f9e7b690d0] <html> <head> <title></title> <style> dl{ position:relative; height:auto; width:400px; padding-bottom:30px; padding-left:30px; } dd{ position:absolute; bottom:2px; left:2px; margin:0px; visibility:hidden; } dt{ background-color:green; } </style> <script type="text/javascript"> function doeover(){ var temp=document.getElementsByTagName('dt'); for (var i=0,templ=temp.length;i<templ;i++) { temp[i].onmouseover=function(){ for (var i=0,templ=temp.length;i<templ;i++) { temp[i].nextSibling.style.visibility='hidden'; } this.nextSibling.style.visibility='visible'; } } } window.onload=doeover; </script> </head> <body> <dl> <dt>opdracht1</dt><dd>informatie over opdracht1</dd> <dt>opdracht2</dt><dd>informatie over opdracht2</dd> <dt>opdracht3</dt><dd>informatie over opdracht3</dd> <dt>opdracht4</dt><dd>informatie over opdracht4</dd> </dl> </body> </html> [/code:1:f9e7b690d0] Het javascript-gedeelte doet wel wat je wil geloof ik, het kan alleen nog wel een heel stuk beter.
  • thanks, Dit was precies wat ik hebben moest :)
  • Ik ben overgens op zoek gegaan naar <dt /> en <dd /> maar kan hier niks over vinden, kan iemand me hier informatie over geven over wat het precies doet of is? -marcel
  • [url=http://www.w3.org/TR/REC-html40/struct/lists.html]Lists in HTML documents[/url]

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.