Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Info box bij link

localhost
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
  • Lists in HTML documents

Beantwoord deze vraag

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