class / id probleem

[anoniem]

ik zit met een ID/Class probleem. Ik maak gebruik van [url=http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/]CSS rollovers[/url]. 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/rollovers/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/rollovers/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

[anoniem]

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

[anoniem]

sorry, typvoutje van mij... probleem blijft hetzelfde is het probleem zo moeilijk of gewoon onduidelijk :(

[anoniem]

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

[anoniem]

[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

[anoniem]

[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

[anoniem]

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]

[anoniem]

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

[anoniem]

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

[anoniem]

bas, je bent geweldig... Hier had ik idd zelf achter moeten komen, als je het zo ziet is het heel simpel maar je moet het ff weten. bedankt ! -marcel