tekst:hover wisselen van classes???

[anoniem]

Ik wil graag het volgende: Een tabblad van mijn website bestaat uit 3 afbeeldingen, nl; - tabblad-linkerkant.gif; - tabblad-achtergrond.gif; - tabblad-rechterkant.gif; alle afbeeldingen staan ingesteld mbv CSS als achtergronden binnen een class, dus de source ziet er als volgt uit: [code:1:72024252b6] <table> <tr> <td class="tabblad-links">&</td> <td class="tabblad-midden"><div class="tabblad-tekst">leesvoer</div></td> <td class="tabblad-rechts">&</td> </tr> </table> [/code:1:72024252b6] wanneer ik nu over de tekst [b:72024252b6]'leesvoer'[/b:72024252b6] ga, wil ik dat de achtergronden in "tabblad-links" en "tabblad-rechts" veranderen, samen met de achtergrond in "tabblad-midden". De CSS ziet er als volgt uit: [code:1:72024252b6] .tabblad-links { background-image: url(tabblad-linkerkant.gif); background-repeat: no-repeat; background-position: 0px 0px; width: 9px; } .tabblad-rechts { background-image: url(tabblad-rechterkant.gif); background-repeat: no-repeat; background-position: 0px 0px; width: 8px; } .tabblad-achtergrond { background-image: url(tabblad-achtergrond.gif); background-repeat: repeat-x; width: auto; background-position: 0px 0px; } .tabblad-tekst { font-family: Tahoma, Verdana, Arial, "Trebuchet MS"; font-weight: bold; color: #333333; white-space: nowrap; padding: 3px; font-size: 12px; } [/code:1:72024252b6] dus, dan zou het moeten wisselen van class, naar bv: [code:1:72024252b6] .tabblad-links-over { background-image: url(tabblad-linkerkant-over.gif); background-repeat: no-repeat; background-position: 0px 0px; width: 9px; } .tabblad-rechts-over { background-image: url(tabblad-rechterkant-over.gif); background-repeat: no-repeat; background-position: 0px 0px; width: 8px; } .tabblad-achtergrond-over { background-image: url(tabblad-achtergrond-over.gif); background-repeat: repeat-x; width: auto; background-position: 0px 0px; } [/code:1:72024252b6] Heeft iemand nu enig idee hoe k alle drie de classes kan verwisselen door enkel over de tekst [b:72024252b6]'leesvoer'[/b:72024252b6] te gaan? Ik denk zelf dat ik dit met JavaScript zal moeten doen, maar zou het liever met PHP doen. Mocht het niet anders kunnen is het gewoon jammer en gebruik k wel javascript.

[anoniem]

Met PHP zal je dat niet gaan lukken, dat is server-side. Dit zul je met javascript moeten gaan oplossen. Ik zal een klein opzetje maken: [code:1:23c7780ebf] <table> <tr> <td id="tabblad-links" class="tabblad-links">&</td> <td id="tabblad-midden" class="tabblad-midden"><div class="tabblad-tekst">leesvoer</div></td> <td id="tabblad-rechts" class="tabblad-rechts">&</td> </tr> </table> [/code:1:23c7780ebf] En nu het script: [code:1:23c7780ebf] window.onload=function(){ var x=document.getElementById('tabblad-tekst'); x.onmouseover=doe; x.onmouseout=undoe; } function doe(){ document.getElementById('tabblad-tekst').className='tabblad-tekst-over'; document.getElementById('tabblad-midden').className='tabblad-midden-over'; document.getElementById('tabblad-rechts').className='tabblad-rechts-over'; } function undoe(){ document.getElementById('tabblad-tekst').className='tabblad-tekst'; document.getElementById('tabblad-midden').className='tabblad-midden'; document.getElementById('tabblad-rechts').className='tabblad-rechts'; } [/code:1:23c7780ebf] Het is geen geweldige code, maar volgens mij zou het moeten werken.

[anoniem]

Niet proberen het wiel opnieuw uit te vinden... ;) - http://alistapart.com/articles/slidingdoors/ - http://alistapart.com/articles/slidingdoors2/ - Bas

[anoniem]

BasHamar, dat had k al gelezen en k weet dat het werkt.. Maar, het is te langzaam met CSS (en k altijd maar denken dat CSS-opmaak sneller was dan met tabellen :roll: ) K wil het gewoon met tabellen aangezien k niet veel van CSS opmaak snap. Weleens het 1 en ander geprobeerd, maar ik vindt het echt een drama om daar een spetterende (grafisch verantwoorde) website mee te maken.. Mocht jij voorbeelden hebben van grafisch zeer aantrekkelijke sites welke zijn gebouwd met behulp van CSS, CSS-p en/of CSS-2 sta k daar ook voor open.. Maar heb helaas nog nooit iets gezien waar mijn mond van op de grond viel.. :oops:

[anoniem]

kijk hier [url]http://csszengarden.com[/url] Dat heeft mij iig wel overgehaald om volledig op XHTML en CSS over te gaan !!!!!

[anoniem]

[quote:48f2e715bf="Stefan Nagtegaal"]BasHamar, dat had k al gelezen en k weet dat het werkt.. Maar, het is te langzaam met CSS (en k altijd maar denken dat CSS-opmaak sneller was dan met tabellen :roll: )[/quote:48f2e715bf]Laat me die benchmark test zien. M.i. is dit 'bullshit'. [quote:48f2e715bf]K wil het gewoon met tabellen aangezien k niet veel van CSS opmaak snap.[/quote:48f2e715bf]non-argument [quote:48f2e715bf]Mocht jij voorbeelden hebben van grafisch zeer aantrekkelijke sites welke zijn gebouwd met behulp van CSS, CSS-p en/of CSS-2 sta k daar ook voor open.. Maar heb helaas nog nooit iets gezien waar mijn mond van op de grond viel.. :oops:[/quote:48f2e715bf]Los van het feit dat zulke sites er wel degelijk zijn vraag ik me af of jij wel snapt wat een website moet dienen en daarnaast of jij snapt wat er nog meer belangrijk is aan een website _naast_ het ontwerp. (ik vraag het me af, ik zeg het niet 'hard op'. Persoonlijk vind ik http://stopdesign.com/ een mooie site.

[anoniem]

Tja, ik weet niet precies wat je wil. Ik dacht dat je wil dat als je over de leesvoer tekst gaat, dat er op andere elementen bepaalde stijleigenschappen veranderen. Dit is op het moment nog niet mogelijk met css. Daarom deed ik het met javascript. Over het algemeen is het gebruik van css te verkiezen boven javascript. Css is normaal gesproken sneller, omdat het 'hardcoded' in de browser zit. [quote:08619892d1] K wil het gewoon met tabellen aangezien k niet veel van CSS opmaak snap. Weleens het 1 en ander geprobeerd, maar ik vindt het echt een drama om daar een spetterende (grafisch verantwoorde) website mee te maken.. [/quote:08619892d1] Het is ook best moeilijk om css te leren, het heeft best wel een hoge leercurve. Maar het is zeker de moeite waard.

[anoniem]

[quote:96888a9c3d]Laat me die benchmark test zien. M.i. is dit 'bullshit'. [/quote:96888a9c3d] Ik heb geen benchmarks, ik oordeel over wat k in mijn browser zie.. Ik weet best dat IE 6 geen beste browser is, maar aangezien meer dan 95% van mijn bezoekers daarmee binnen gesurft komen, lijkt t me handig om daar toch enigzins rekening mee te houden. De links van a list aprt zijn schitterend en werken als n trein in elke browser, behalve in IE.. [quote:96888a9c3d]Quote: K wil het gewoon met tabellen aangezien k niet veel van CSS opmaak snap. non-argument [/quote:96888a9c3d] Lijkt me niet aan jouw om te beslissen of dit wel of geen 'non-argument' is.. [quote:96888a9c3d]Los van het feit dat zulke sites er wel degelijk zijn vraag ik me af of jij wel snapt wat een website moet dienen en daarnaast of jij snapt wat er nog meer belangrijk is aan een website _naast_ het ontwerp. (ik vraag het me af, ik zeg het niet 'hard op'.[/quote:96888a9c3d] Wat jij je afvraagt moet je zelf weten en hoe goed je jezelf vind ook, maar je kunt op z'n minst een ieder een [b:96888a9c3d]normaal[/b:96888a9c3d] antwoord geven en in z'n waarde laten. RESPECT wordt t ook wel genoemd! Waarom zeik j mijn vragen af? Niet iedereen is zo verschrikkelijk goed als jij, dus daarom probeer IK op een NORMALE manier aan een voor mij '[i:96888a9c3d]beter[/i:96888a9c3d]' resultaat te komen. [quote:96888a9c3d]Persoonlijk vind ik http://stopdesign.com/ een mooie site.[/quote:96888a9c3d]Tja, k vind het wel aardig, maar k ben zelf meer iemand die van kleur houdt. En meer PhotoShop-uiterlijk sites. Helaas zie j die zelden of nooit in CSS.. [/quote]

[anoniem]

[quote:78a9c2d624] De links van a list aprt zijn schitterend en werken als n trein in elke browser, behalve in IE.. [/quote:78a9c2d624] Wat gaat dan niet snel? Bedoel je misschien het :hover effect op de tabs in IE, dat die het achtergrondplaatje niet uit de cache haalt? Dat staat uitgelegd in het artikel.

[anoniem]

[quote:706bcc725f="Stefan Nagtegaal"]De links van a list aprt zijn schitterend en werken als n trein in elke browser, behalve in IE.[/quote:706bcc725f]Je kan IE een hoop verwijten, maar dit niet. Op mijn systeem werkt het prima en net zo snel als in Mozilla. Ik vermoed dan ook niet dat de gemiddelde gebruiker (zoals ik) last zal hebben van de traagheid die je beschrijft. - Bas

[anoniem]

[quote:c2866299a0="termin8or"]non-argument[/quote:c2866299a0] Nee, dit is geen non-argument. Dit is zelfs een zeer sterk argument. Dat jij het er niet mee eens bent is jouw goed recht. Niet iedereen heeft altijd de benodigde resources (tijd, kennis, budget) om alles volgens het ideaalbeeld te voltooien. Jij kijkt vanuit een andere invalshoek naar het probleem. Namelijk vanuit het streven te voldoen aan de normen van het w3c. Een andere invalshoek is de economische kant en daar spelen dat soort idealen vaak een ondergeschikte rol. Let wel: ik zeg niet dat deze twee invalshoeken onverenigbaar zijn. Ik zeg alleen dat af en toe best met een botte bijl gehakt mag worden. [quote:c2866299a0="termin8or"]Persoonlijk vind ik http://stopdesign.com/ een mooie site.[/quote:c2866299a0] Omdat over smaak best te twisten valt: ;-) Persoonlijk vind ik dit dus een 13 in een dozijn site (standaard weblog layoutje). Misschien functioneel, maar hiervan zijn er duizenden te vinden op het internet. Daarnaast ben ik niet zo gecharmeerd van de kleuren en die stippellijntjes die nogal "in" zijn :)

[anoniem]

Mooi gesproken Annie! ;-) Vertel jij mij dan eens wat jij een mooie site vind? (Hoeft wat mij betreft nergens aan te voldoen qua W3C-restrictie's of valide XHTML of wat dan ook..) Ben gewoon nieuwsgierig...

[anoniem]

Ik ken bedrijven die [url=http://www.cinnamon.nl/portfolio/casestudies/0003/]tijd besparen door web standaarden[/url]. Ikzelf heb nooit gewerkt met tabellen dus daar kan ik geen oordeel over vellen. Ik vind wel dat je met je tijd mee moet gaan (als er een nieuwe Flash komt, wordt dat toch ook geleerd?).

[anoniem]

[i:8cfb71d869]Ik denk zelf dat ik dit met JavaScript zal moeten doen, maar zou het liever met PHP doen.[/i:8cfb71d869] Oei. Met dit ene zinnetje geef je aan dat je niveau lager is dan ik aan de hand van de rest van je post had ingeschat ;) Even een paar algemene wijsheden: PHP en Perl en Java enzo zijn server-side talen die op de server runnen en dan HTML uitpoepen naar de client, waar de browser het leest. Als je met jouw muis over een link gat dan is het niet handig om dan een hele nieuwe pagina te laden omdat je 1 (of 3) plaatje(s) wil veranderen. Dus dat kan beter client-side met Javascript. Nog een wijsheid: CSS is heel handig als je dezelfde layout op meerdere pagina's wilt hebben. Je maakt een enkel style.css bestandje met alle styl troep erin en in elke pagina roep je dan die stylesheet aan. Reuze handig!

[anoniem]

Oke dan.. K begin een beetje overstag te gaan om nogmaals een layout te maken met behulp van CSS.. Maar, hheeft er dan iemand een Nederlandse pagina waarin wordt uitgelegd hoe zoiets in elkaar steekt? elke pagina die ik vind is in het engels... Voor wat betreft het 25 jaar PHP-en is idd niet helemaal waar. Ik programmeer al in PHP sinds het beschikbaar is en dat zal ongeveer tussen de 10 en 15 jaar liggen. (Onder voorbehoud, want k weet t niet helemaal zeker)

[anoniem]

Stefan, ik wil niet vervelend doen, maar wat is het probleem met Engels als je al zo lang in de webindustrie zit? Er zijn namelijk prachtige resources te vinden in het Engels, helaas nog wat weinig in het NL. Ik ben wel een projectje gestart met een paar andere mensen uit NL om CSS wat beter uit te leggen e.d. maar dat kan nog wel een tijd gaan duren. De enige goede NL resources over dit soort onderwerpen die ik ken (gaan niet specifiek over CSS) zijn: - http://www.struikelblok.nl/ - http://naarvoren.nl/ Daarnaast zijn er een paar standaard tutorial sites, maar die zul je ongetwijfeld wel kennen.

[anoniem]

[quote:8b396dfcb5="Stefan Nagtegaal"]Oke dan.. K begin een beetje overstag te gaan om nogmaals een layout te maken met behulp van CSS.. Maar, hheeft er dan iemand een Nederlandse pagina waarin wordt uitgelegd hoe zoiets in elkaar steekt? elke pagina die ik vind is in het engels... Voor wat betreft het 25 jaar PHP-en is idd niet helemaal waar. Ik programmeer al in PHP sinds het beschikbaar is en dat zal ongeveer tussen de 10 en 15 jaar liggen. (Onder voorbehoud, want k weet t niet helemaal zeker)[/quote:8b396dfcb5] Maak er maar een groot voorbehoud van, want php bestaat hooguit 10 jaar. Zie dit verhaaltje maar: http://www.php4all.net/history.html Al die jaren heb je dus in iets geprogrammeerd, maar wat? :wink: Wat betreft het leren van css. http://www.handleidinghtml.nl is een erg goede site voor het leren van html. Het css-gedeelte is ook goed, alleen wat minder uitgebreid. Als je problemen hebt of iets niet goed begrijpt, dan kun je dat altijd vragen op het forum, ongeacht welke vraag. De enige voorwaarden zijn dat je zelf enige moeite steekt om het probleem zelf op te lossen en dat je de vraag zo goed mogelijk formuleert. [color=darkred:8b396dfcb5][/color:8b396dfcb5]