[DHTML + CSS] Stijl veranderen onmouseover en onmouseout

[Rexomnium]

Met behulp van:

HTML:

<td onmouseover="this.style.backgroundColor='#000000';'" 
onmouseout="this.style.backgroundColor='#FFFFFF';">Index</td>

Wordt de cell van de tabel zwart als ik met mijn muis eroverheen ga en wit als ik er weer vanaf ga. Simpel.

Nu wil ik meerdere artributen gebruiken. Ik wil dat doen met behulp van een class die ik in een externe CSS-file heb gedefinieerd.

Cascading Stylesheet:

.test {
background-color: #000;
color: #FFF;
font-weight: bold;
cursor: pointer;
etc, etc
}

Ik wil dus dat ik met een onmouseover de stijl verander in .test. Simpelweg

HTML:

<td onmouseover="this.style='test';'">Index</td>

werkt natuurlijk niet. Hoe moet ik dat doen?

[ Voor 31% gewijzigd door Rexomnium op 05-11-2004 13:49 ]

[faabman]

JavaScript:

  this.className = 'test';
  this.setAttribute('class', 'test');

[André]

Maar hou er wel rekening mee dat het switchen van classes heel traag kan gaan.

[InZane]

TS: Ziet eruit als een simpele link met een mouseover of niet? Waarom gebruik je dan niet gewoon a:hover?

[Verwijderd]

InZane schreef op 05 november 2004 @ 14:07:
TS: Ziet eruit als een simpele link met een mouseover of niet? Waarom gebruik je dan niet gewoon a:hover?

Je kan :hover binnen IE alleen aan een anchor hangen, dus daar heeft 'ie hier niets aan denk ik (tenzij al z'n bezoekers een browser zoals Firefox gebruiken). Bovendien zal er een reden zijn dat 'ie geen anchor heeft gebruikt, maar een TD.

[BalusC]

Dat kan met Javascript:

Java:

function changeTdClass() {
  var td = document.getElementsByTagName('td');
  for(var i=0;i<td.length;i++) {
    if(td.item(i).className=='class1') {
      td[i].onmouseover = function() {
        this.className = 'class2';
      }
      td[i].onmouseout = function() {
        this.className = 'class1';
      }
    }
  }
}

HTML:

<td class="class1">

Cascading Stylesheet:

.class1 {background:#fff; color:#000;}
.class2 {background:#000; color:#fff;}
etc

[InZane]

Verwijderd schreef op 05 november 2004 @ 14:12:
[...]


Je kan :hover binnen IE alleen aan een anchor hangen, dus daar heeft 'ie hier niets aan denk ik (tenzij al z'n bezoekers een browser zoals Firefox gebruiken). Bovendien zal er een reden zijn dat 'ie geen anchor heeft gebruikt, maar een TD.

Ben benieuwd naar de reden

[BalusC]

Om zoiets te bereiken, lijkt me?

dit is een linkje uit een menu

dit is een linkje uit een menu

dit is een linkje uit een menu

Leuk voor in de navigatiemenu's enzo

[ Voor 4% gewijzigd door BalusC op 05-11-2004 23:51 ]

[crisp]

En nu zonder JS:

linkje 1

linkje 2

linkje 3

[Verwijderd]

ja en als mensen nou op de td klikken?
krijgen ze nix. en ze zien wel de achtergrond veranderen.
en alleen als je over de link zelf komt zie je een lijn.

en de rollovers zijn afhankelijk van javascript.
waarom niet gewoon a:hover gebruiken?
met display:block; en width:100%; enzo kan je exact hetzelfde effect krijgen, of beter...

edit:
crisp is me voor met zijn live voorbeeld

[ Voor 9% gewijzigd door Verwijderd op 06-11-2004 00:06 ]

[BalusC]

Hm, er stond mij bij dat dit niet lekker werkte in mozilla en opera. Affijn, mijn scriptje was eigenlijk bedoeld voor td's zonder een a:link erin. Maar voor de td's met een link is de code van crisp wel veel netter

[SchizoDuckie]

Larsan! lekker ding!

Je kan ook clay's csshover.htc gebruiken, dan kan je ook td:hover gebruiken in IE. in firefox werkt dit standaard al

[Verwijderd]

SchizoDuckie schreef op 06 november 2004 @ 12:12:
Larsan! lekker ding!

Je kan ook clay's csshover.htc gebruiken, dan kan je ook td:hover gebruiken in IE. in firefox werkt dit standaard al

nergens voor nodig

crisp schreef op 06 november 2004 @ 00:01:
En nu zonder JS:

code:

<style type="text/css">

#navtable td {
    height: 24px;
    width: 200px;
    text-align: center;
    padding: 0px;
}
#navtable td a {
    display: block;
    width: 100%;
    line-height: 24px;
    color: #000;
    background-color: #fff;
    text-decoration: none;
}
#navtable td a:hover {
    background-color: #def;
    text-decoration: underline;
}

</style>
<table id="navtable">
    <tr>
        <td><a href="#">linkje 1</a></td>
    </tr>
    <tr>
        <td><a href="#">linkje 2</a></td>
    </tr>
    <tr>
        <td><a href="#">linkje 3</a></td>
    </tr>
</table>

wie heeft het over a:link :*D

[Cavorka]

Verwijderd schreef op 06 november 2004 @ 16:33:
[...]
nergens voor nodig

Zonder die .htc kom je niet heel erg ver in IE hoor. Het lijkt me nogal omslachtig om een stijl voor elk ID, en dus elk object, op je pagina te gaan maken. Het kan wel zonder, maar dat is echt ontzettend onhandig. Dat wordt zo onhandig en totaal niet onderhoudbaar (spelling? w.t.f.). Als je voor elk ID alles gaat aangeven, gaat naar mijn mening het hele idee en het grote voordeel achter CSS verloren (de classes).

[ Voor 23% gewijzigd door Cavorka op 06-11-2004 17:31 ]

[drm]

faabman:

JavaScript:

  this.className = 'test';
  this.setAttribute('class', 'test');

Iets aardiger mag wel

[JHS]

Cavorka schreef op 06 november 2004 @ 17:29:
[...]
Zonder die .htc kom je niet heel erg ver in IE hoor. Het lijkt me nogal omslachtig om een stijl voor elk ID, en dus elk object, op je pagina te gaan maken. Het kan wel zonder, maar dat is echt ontzettend onhandig. Dat wordt zo onhandig en totaal niet onderhoudbaar (spelling? w.t.f.). Als je voor elk ID alles gaat aangeven, gaat naar mijn mening het hele idee en het grote voordeel achter CSS verloren (de classes).

Dit werkt ook gewoon in IE hoor :

code:

<style type="text/css">

.navtable td {
    height: 24px;
    width: 200px;
    text-align: center;
    padding: 0px;
}
.navtable td a {
    display: block;
    width: 100%;
    line-height: 24px;
    color: #000;
    background-color: #fff;
    text-decoration: none;
}
.navtable td a:hover {
    background-color: #def;
    text-decoration: underline;
}

</style>
<table class="navtable">
    <tr>
        <td><a href="#">linkje 1</a></td>
    </tr>
    <tr>
        <td><a href="#">linkje 2</a></td>
    </tr>
    <tr>
        <td><a href="#">linkje 3</a></td>
    </tr>
</table>

<table class="navtable">
    <tr>
        <td><a href="#">linkje 52</a></td>
    </tr>
    <tr>
        <td><a href="#">linkje 53</a></td>
    </tr>
    <tr>
        <td><a href="#">linkje 54</a></td>
    </tr>
</table>

[ Voor 19% gewijzigd door JHS op 06-11-2004 19:54 ]

[Verwijderd]

[22:29:35] <@DjRedMar[Dru> g0t ownt
[22:29:45] <@Krause> stuur ze een bedankmailtje

bij deze Hier had ik al dikke ruzie mee met IE (td:hover) werkte nie....

toppie