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

Webprogrammeren & scripting

class / id probleem

xanuex
9 antwoorden
  • ik zit met een ID/Class probleem.

    Ik maak gebruik van CSS rollovers.

    Nu heb ik 2 plaatjes die ik tegelijk wil 'wisselen', bij deze [i:610202fc79]plaatje 1[/i:610202fc79] en [i:610202fc79]plaatje 2[/i:610202fc79].

    [code:1:610202fc79]
    // css
    ul#nav li.n-plaatje1 a {
    display: block;

    position: absolute;
    top: 15px;
    left: 50px;

    height: 67px;
    width: 67px;

    background: url("../images
    ollovers/plaatje1.gif") 0 0 no-repeat;

    text-decoration: none;
    }

    // link
    <li class="plaatje1"><a href="index.php?show=iets"></a></li>
    [/code:1:610202fc79]Dit werkt prima

    [code:1:610202fc79]
    // css
    ul#nav li#n-plaatje1 a {
    display: block;

    position: absolute;
    top: 15px;
    left: 50px;

    height: 67px;
    width: 67px;

    background: url("../images
    ollovers/plaatje1.gif") 0 0 no-repeat;

    text-decoration: none;
    }

    // link
    <li id="plaatje1"><a href="index.php?show=iets"></a></li>
    [/code:1:610202fc79]Dit werkt dus niet.

    goed, nu zou je zeggen, kies dan voor de 1e maar nu wil ik het andere plaatje ook nog laten wisselen.

    [code:1:610202fc79]
    // functie
    <script type="text/javascript">
    function Hover(pic) {
    document.getElementById(pic).style.backgroundPosition = "0 -156px";
    }

    function HoverOut(pic) {
    document.getElementById(pic).style.backgroundPosition = "0 0px";
    }
    </script>


    // css
    span#top-left {
    background: url("../images/brain/top-left.jpg") 0 0 no-repeat;

    position: absolute;
    top: 0px;
    left: 0px;

    width: 225px;
    height: 156px;
    }

    // html voor plaatje 2
    <span id="top-left"></span>

    // link
    <li class="plaatje1"><a href="index.php?show=iets" onmouseover="Hover('top-left');" onmouseout="HoverOut('top-left');></a></li>
    [/code:1:610202fc79]dit werkt dus niet.

    wanneer ik het laatste met <li id="plaatje1" etc doe werkt de hover op plaatje 2 weer wel maar op plaatje 1 verdomd ie het dan weer :-?

    heeft iemand een id ?
    -marcel
  • :roll: [quote:4bbedb8fa2="xanuex"]ik zit met een ID/Class probleem.[/quote:4bbedb8fa2]Volgens mij gooi je e.e.a. door elkaar…
    Bij[code:1:4bbedb8fa2]// link
    <li class="plaatje1"><a href="index.php?show=iets"></a></li>[/code:1:4bbedb8fa2]hoort[code:1:4bbedb8fa2]// css
    li.plaatje1 a { …. }[/code:1:4bbedb8fa2]en bij[code:1:4bbedb8fa2]// link
    <li id="plaatje1"><a href="index.php?show=iets"></a></li>[/code:1:4bbedb8fa2]hoort[code:1:4bbedb8fa2]
    // css
    li#plaatje1 a { …. }[/code:1:4bbedb8fa2]Dus een . bij een class en een # bij een id…
  • sorry, typvoutje van mij…

    probleem blijft hetzelfde


    is het probleem zo moeilijk of gewoon onduidelijk :(
  • Ik vermoed dat het te maken heeft met het feit dat je in je stylesheet ID's probeert te nesten, wat natuurlijk onzin is. Een ID is uniek, die kan je direct aanspreken. Misschien moet je het dus veranderen in[code:1:16c77bb829]#n-plaatje1 a {[/code:1:16c77bb829]Wellicht dat het dan werkt.

    - Bas
  • [quote:f7910a0cdd]Ik vermoed dat het te maken heeft met het feit dat je in je stylesheet ID's probeert te nesten, wat [b:f7910a0cdd]natuurlijk[/b:f7910a0cdd] onzin is. Een ID is uniek, die kan je direct aanspreken.[/quote:f7910a0cdd]
    natuurlijk :D

    Het werkt iig perfect, heb ik nog een klein vraagje aan de hand van dit probleem, ik heb 5 plaatjes waarvan 3 met verschillende hoogtes die ik wil laten 'wisselen' alleen wil ik niet 5 functies voor hetzelfde maken.

    [code:1:f7910a0cdd]// voorbeeld functie
    <script type="text/javascript">
    function Hover(pic) {
    document.getElementById(pic).style.backgroundPosition = "0 -156px";
    }

    function HoverOut(pic) {
    document.getElementById(pic).style.backgroundPosition = "0 0px";
    }
    </script>[/code:1:f7910a0cdd]


    [code:1:f7910a0cdd]// functie
    <script type="text/javascript">
    function Hover(pic) {
    document.getElementById(top-left, top-right).style.backgroundPosition = "0 -156px";
    document.getElementById(middle).style.backgroundPosition = "0 -140px";
    document.getElementById(bottom-left, bottom-right).style.backgroundPosition = "0 -204px";
    }

    function HoverOut(pic) {
    document.getElementById(pic).style.backgroundPosition = "0 0px";
    }
    </script>[/code:1:f7910a0cdd]

    waarbij top-left en top-right dezelfde hoogte hebben en
    bottom-left en bottom-right dezelfde hoogte hebben.

    ik weet dat het niet zo werkt, maar ben er nog niet achter hoe het wel zou moeten.

    -marcel
  • [code:1:9de94ea190]// functie
    <script type="text/javascript">
    function Hover(pic) {

    // hoogtes vastleggen
    var topheight = "156px";
    var middleheight = "140px";
    var bottomheight = "204px";

    // achtergrond verplaatsen
    document.getElementById("top-left").style.backgroundPosition = "0 -"+topheight;
    document.getElementById("top-right").style.backgroundPosition = "0 -"+topheight;
    document.getElementById("middle").style.backgroundPosition = "0 -"+middleheight;
    document.getElementById("bottom-left").style.backgroundPosition = "0 -"+bottomheight;
    document.getElementById("bottom-right").style.backgroundPosition = "0 -"+bottomheight;
    }

    function HoverOut(pic) {
    document.getElementById(pic).style.backgroundPosition = "0 0px";
    }
    </script>[/code:1:9de94ea190]Ik weet niet precies wat je zoekt, maar dit helpt je vast op weg. ;)

    - Bas
  • bedankt bas (alweer :))

    ik ben idd een stuk verder met je code, alleen heb ik nu het probleem
    dat hij alle 5 de plaatjes tegelijk wisselt.

    is er iets van een soort break; ofzo?
    ik heb het idee dat hij ze bij het aankomen van de functie gewoon van boven naar beneden afloopt en ze dus op deze manier allemaal wisselt.

    -marcel

    stukje code:
    [code:1:4044cc6498]
    // functie om de plaatjes te wisselen
    <script type="text/javascript">
    function Hover(pic) {

    // achtergrond verplaatsen
    document.getElementById("top-left").style.backgroundPosition = "0 -156";
    document.getElementById("top-right").style.backgroundPosition = "0 -156";
    document.getElementById("middle").style.backgroundPosition = "0 -140";
    document.getElementById("bottom-left").style.backgroundPosition = "0 -204";
    document.getElementById("bottom-right").style.backgroundPosition = "0 -204";
    }

    function HoverOut(pic) {
    document.getElementById(pic).style.backgroundPosition = "0 0px";
    }
    </script>

    //plaatjes die ook gewisseld moeten worden
    <div id="plaatjes">
    <span id="top-left"></span>
    <span id="top-right"></span>
    <span id="middle"></span>
    <span id="bottom-left"></span>
    <span id="bottom-right"></span>
    </div>

    //links met plaatjes die wisselen
    <ul id="links">
    <li id="n-plaatje1">
    <a href="#plaatje1"
    onmouseover="Hover('top-left');"
    onmouseout="HoverOut('top-left');">plaatje1</a>
    </li>

    <li id="n-plaatje2">
    <a href="#plaatje2"
    onmouseover="Hover('middle');"
    onmouseout="HoverOut('middle');">plaatje2</a>
    </li>

    <li id="n-plaatje3">
    <a href="#plaatje3"
    onmouseover="Hover('bottom-left');"
    onmouseout="HoverOut('bottom-left');">plaatje3</a>
    </li>

    <li id="n-plaatje4">
    <a href="#plaatje4"
    onmouseover="Hover('top-right');"
    onmouseout="HoverOut('top-right');">plaatje4</a>
    </li>

    <li id="n-plaatje5">
    <a href="#plaatje5"
    onmouseover="Hover('bottom-right');"
    onmouseout="HoverOut('bottom-right');">plaatje5</a>
    </li>
    </ul>
    [/code:1:4044cc6498]
  • Niemand die een antwoord weet ?

    Met de bovenstaande functie[b:4a902b4870] Hover(brainpart) {[/b:4a902b4870] heb ik het probleem dat alle 5 de plaatjes wisselen, de bedoeling is dat alleen het plaatje wisselt waar het om gaat. Dus bijv alleen plaatje 2 of alleen plaatje 3.

    -marcel
  • Een beetje zelf nadenken kan ook geen kwaad… :-? [code:1:4eb0c58f9f]
    // functie om de plaatjes te wisselen
    <script type="text/javascript">
    function Hover(pic,height) {

    // achtergrond verplaatsen
    document.getElementById(pic).style.backgroundPosition = "0 -"+height+"px";
    }

    function HoverOut(pic) {
    document.getElementById(pic).style.backgroundPosition = "0 0";
    }
    </script>

    //plaatjes die ook gewisseld moeten worden
    <div id="plaatjes">
    <span id="top-left"></span>
    <span id="top-right"></span>
    <span id="middle"></span>
    <span id="bottom-left"></span>
    <span id="bottom-right"></span>
    </div>

    //links met plaatjes die wisselen
    <ul id="links">
    <li id="n-plaatje1">
    <a href="#plaatje1"
    onmouseover="Hover('top-left',156);"
    onmouseout="HoverOut('top-left');">plaatje1</a>
    </li>

    <li id="n-plaatje2">
    <a href="#plaatje2"
    onmouseover="Hover('middle',140);"
    onmouseout="HoverOut('middle');">plaatje2</a>
    </li>

    <li id="n-plaatje3">
    <a href="#plaatje3"
    onmouseover="Hover('bottom-left',204);"
    onmouseout="HoverOut('bottom-left');">plaatje3</a>
    </li>

    <li id="n-plaatje4">
    <a href="#plaatje4"
    onmouseover="Hover('top-right',156);"
    onmouseout="HoverOut('top-right');">plaatje4</a>
    </li>

    <li id="n-plaatje5">
    <a href="#plaatje5"
    onmouseover="Hover('bottom-right',204);"
    onmouseout="HoverOut('bottom-right');">plaatje5</a>
    </li>
    </ul>
    [/code:1:4eb0c58f9f]- Bas

Beantwoord deze vraag

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