Achtergrond- en fontkleur veranderen met onmouseover*

[Adelbert]

Ik wil graag in een tabel de achtergrondkleur en fontkleur wijzigen bij een mouseover. Dit is geen probleem. Op deze manier werkt het goed:

code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr onmouseover="this.bgColor='#d6f484';this.style.color='#cc0000';this.style.cursor='arrow';" onmouseout="this.bgColor='';this.style.color='';this.style.cursor='arrow';">
    <td>jmkjhlkhhllkh</td>
  </tr>
</table>

Maar ik vul een tabel uit een DB op deze manier:

code:

<% 
while not rs.eof
%>
TABEL
<%
rs.movenext() 
wend
%>

En dan doet de fontkleur niets meer, zelfs niet de eerste. Iemand een idee wat er fout gaat?

[.oisyn]

.edit: nvm

[ Voor 181% gewijzigd door .oisyn op 19-09-2008 18:04 ]

[Sebazzz]

Ik zou zeggen: vergelijk de source en je voorbeeldcode.

[Adelbert]

Dat heb ik al meerdere keren gedaan.. Het moet ergens anders inzitten

[ari]

Wat is dan je source (output van je scriptje)?

Er zullen toch echt verschillen moeten zitten in je source en je voorbeeld, als het niet werkt. Misschien ergens een tag vergeten?

[Sebazzz]

Wat zegt het foutconsole van Firefox?

[Adelbert]

Fout tijdens het parsen van waarde voor eigenschap 'cursor'. Declaratie genegeerd.

[Onbekend]

Kan je eens de bron van de pagina hier posten? Want zo kunnen we je niet helpen.

[TeeDee]

Zoals aangegeven:

Post een relevant stuk van de output (view source in je browser) en een relevant stuk code van je ASP en dan zie je meteen wat er fout is/kan zijn.

(De huidige code is dus niet relevant, een loopje maken kunnen we allemaal wel.)

[A_L]

Waarom gebruik je geen css?

code:

table tr:hover
{
    background-color: #d6f484;
    color: #cc0000;
}

Okee, ie6, 7? kent alleen :hovers op links, maar een kniesoor die daar naar kijkt

[Adelbert]

Bij deze.

code:

<td><table width="100%" border="0" cellpadding="0" cellspacing="0">
                                  
                <tr onmouseover="this.bgColor='#d6f484';this.style.color='#cc0000';this.style.cursor='arrow';" onmouseout="this.bgColor='';this.style.color='';this.style.cursor='arrow';">
                                  <td width="34">
                                        <a href="overzicht_klant_detail_i.asp?id=141">141</a>
                                        <td width="91">
                                      78
                                      
                                    <td width="114">
                                      78
                                    </td>
                                    <td width="115"><div align="left">
                                        78
                                    </div></td>
                                    <td width="156"><div align="left">
                                        78
                                    </div></td>
                                    <td width="54">
                                      78
                                    </td>
                                    <td width="106">
                                      78
                                                                         <div align="right"></div></td>
                                    </tr>
                                  
                <tr onmouseover="this.bgColor='#d6f484';this.style.color='#cc0000';this.style.cursor='arrow';" onmouseout="this.bgColor='';this.style.color='';this.style.cursor='arrow';">
                                  <td width="34">
                                        <a href="overzicht_klant_detail_i.asp?id=97">97</a>
                                        <td width="91">
                                      Kees
                                      
                                    <td width="114">
                                      van
                                    </td>
                                    <td width="115"><div align="left">
                                        Jansen
                                    </div></td>
                                    <td width="156"><div align="left">
                                        bobstraat
                                    </div></td>
                                    <td width="54">
                                      20
                                    </td>
                                    <td width="106">
                                      Breda
                                                                         <div align="right"></div></td>
                                    </tr>

enz.

[Onbekend]

onmouseout="this.bgColor='';this.style.color='';

Je moet wel een kleur opgeven.

[ Voor 15% gewijzigd door Onbekend op 19-09-2008 19:33 ]

[Plecky]

Ik zie in een korte doorloop twee onafgesloten td-tags.
Haal m eens door een validator.

[Adelbert]

onmouseout moet leeg zijn (default kleuren weer)

Zal ik eens doen Piecky.

[Mei]

Er zitten een boel fouten in je code:
1) Zoals Firefox je al vertelde is 'arrow' geen geldige waarde voor de property 'cursor'. Meer info over cursor.
2) bgColor is volgens mij geen property in JS, laat staan een property die je zou moeten gebruiken. Probeer this.style.backgroundColor eens.
3) Google eens naar 'unobtrusive javascript'. JavaScript hoort namelijk niet tussen je broncode thuis, net zoals dat CSS daar niet hoort. Netjes in een apart bestand gooien die hap en dan een eventhandler aan de betreffende elementen hangen. Bijkomend voordeel van deze scheiding is dat je code gemakkelijker te beheren en valideren is.

Succes!

[Sebazzz]

Adelbert schreef op vrijdag 19 september 2008 @ 19:24:
onmouseout moet leeg zijn (default kleuren weer)

Maar default kleuren krijg je niet door geen kleur op te geven.

3) Google eens naar 'unobtrusive javascript'. JavaScript hoort namelijk niet tussen je broncode thuis, net zoals dat CSS daar niet hoort. Netjes in een apart bestand gooien die hap en dan een eventhandler aan de betreffende elementen hangen. Bijkomend voordeel van deze scheiding is dat je code gemakkelijker te beheren en valideren is.

Ja, en als je het écht goed doet kom je nergens javascript in je pagina tegen buiten de script tag in de <head> van je pagina Ik had vorige jaar voor eerste periode informatie havo 4 had ik een pagina gemaakt waarbij de CSS, de inhoud en de javascript compleet gescheiden was. De docent snapte niet hoe het kon dat ik 'geen opmaak en programmeertaal in mijn html' had (de rest werkte met frames en tabellen). Haha

[ Voor 68% gewijzigd door Sebazzz op 19-09-2008 19:44 ]

[crisp]

Plecky schreef op vrijdag 19 september 2008 @ 19:23:
Ik zie in een korte doorloop twee onafgesloten td-tags.
Haal m eens door een validator.

Die maalt daar niet om aangezien de close-tag voor TD optioneel is in HTML

[Adelbert]

Mei schreef op vrijdag 19 september 2008 @ 19:33:
Er zitten een boel fouten in je code:
1) Zoals Firefox je al vertelde is 'arrow' geen geldige waarde voor de property 'cursor'. Meer info over cursor.
2) bgColor is volgens mij geen property in JS, laat staan een property die je zou moeten gebruiken. Probeer this.style.backgroundColor eens.
3) Google eens naar 'unobtrusive javascript'. JavaScript hoort namelijk niet tussen je broncode thuis, net zoals dat CSS daar niet hoort. Netjes in een apart bestand gooien die hap en dan een eventhandler aan de betreffende elementen hangen. Bijkomend voordeel van deze scheiding is dat je code gemakkelijker te beheren en valideren is.

Succes!

Punt 2 is het¨probleem niet de BG color doet het goed.
Punt 3 klopt wat je zegt zo doe ik het ook, maar als test/vb even niet.

[Sebazzz]

HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr onmouseover="this.style.backgroundColor='#d6f484';this.style.color='#cc0000';" onmouseout="this.style.backgroundColor='#FFFFFF';this.style.color='#000000';">
    <td>Dit was een test tabel :)</td>
  </tr>
</table>

Dit werkt in Firefox 3.1 toch vele malen beter hoor

[dusty]

Bah.. allemaal HTML crap

De inhoud van de tabel mag dan uit de database komen, wat je wilt is nog steeds een HTML probleem, geen programmeer probleem.

moved: PRG -> WEB

[Adelbert]

Sebazzz schreef op vrijdag 19 september 2008 @ 19:51:

HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr onmouseover="this.style.backgroundColor='#d6f484';this.style.color='#cc0000';" onmouseout="this.style.backgroundColor='#FFFFFF';this.style.color='#000000';">
    <td>Dit was een test tabel :)</td>
  </tr>
</table>

Dit werkt in Firefox 3.1 toch vele malen beter hoor

Klopt, thx.

Heb nu jou code gebruikt, maar dan bij onmouseout backgroupColor leeg ivm afbeelding als achtergrond.

Verder nog geen vooruitgang.

[Sebazzz]

Zoals hierboven ook al gezegt: Je moet backgroundColor niet leeg gebruiken. Of je zet hem op de orginele kleur of je zet hem op 'inherit'.

En wat betreft de onafgesloten tags: Dat is een kwestie van debuggen. Kijk goed naar je code, het zijn de kleine fouten die het 'em doen. Zeker bij zo'n (imo) ongestructureerde taal als ASP/VB.

[ Voor 40% gewijzigd door Sebazzz op 19-09-2008 20:04 ]

[Adelbert]

Oke, done. Ik wist niet dat daar een term voor was (laat het altijd leeg). Maar ik kan nog steeds niet verklaren waarom mijn vb in post1 wel werkt en mijn probleempagina niet.

De tags zijn aangepast, heb de pagina door een validator heen gehaald.

Als ik de values niet leeg maar en inherit erin zet dan doet ie het goed in FF maar niet in IE. De gbcolor veranderd dan niet meer terug.

[ Voor 84% gewijzigd door Adelbert op 19-09-2008 20:19 ]

[Verwijderd]

is het niet zo dat dit met enkel en alleen CSS kan gefixt worden?

iets zoals dit:

td:hover
{
background: rgb(0, 0, 0);
}

[RobIII]

Sebazzz schreef op vrijdag 19 september 2008 @ 20:03:
Zeker bij zo'n (imo) ongestructureerde taal als ASP/VB.

Wat is het verschil met PHP of eender welke andere taal in deze Dit slaat als een tang op een varken...

[ Voor 5% gewijzigd door RobIII op 23-09-2008 11:47 ]

[Bosmonster]

Verwijderd schreef op dinsdag 23 september 2008 @ 11:33:
is het niet zo dat dit met enkel en alleen CSS kan gefixt worden?

iets zoals dit:

td:hover
{
background: rgb(0, 0, 0);
}

Als je alle apen die met IE werken buiten wilt sluiten dan is dat een optie ja.

[Sebazzz]

RobIII schreef op dinsdag 23 september 2008 @ 11:43:
[...]

Wat is het verschil met PHP of eender welke andere taal in deze Dit slaat als een tang op een varken...

Ik vind het ongestructureerd omdat het geen accolades bij ifs gebruikt en ik hou gewoon zowieso meer van C-style talen zoals C#, PHP e.d.

[RobIII]

Sebazzz schreef op dinsdag 23 september 2008 @ 14:01:
[...]

Ik vind het ongestructureerd omdat het geen accolades bij ifs gebruikt en ik hou gewoon zowieso meer van C-style talen zoals C#, PHP e.d.

Dat is gewoon een kwestie van voorkeur; maar dat heeft geen drol te maken met:

En wat betreft de onafgesloten tags: Dat is een kwestie van debuggen. Kijk goed naar je code, het zijn de kleine fouten die het 'em doen. Zeker bij zo'n (imo) ongestructureerde taal als ASP/VB.

En of je nou accolades of begin/end of whatever gebruikt: het idee is hetzelfde en maakt een taal echt niet ongestructureerder.

[ Voor 10% gewijzigd door RobIII op 23-09-2008 14:04 ]

[BtM909]

Zullen we deze meta-discussie laten voor wat het is of naar een nieuw topic afsplitsen?

[Adelbert]

Problem solved.

Flinke n00bfout maar heb het totaal over het hoofd gezien. In mijn css stond dat de font-color altijd zwart moest zijn en ja dan doet ie niet veel bij mouseover.

Toch bedankt weer allemaal.