[JS] OnMouseOver <tr> - Softwareontwikkeling

zaterdag 29 december 2001 15:31

Acties:

Verwijderd

Topicstarter

ik heb een probleem met OnMouseOver en <tr>
een voorbeeld zoals het nu is vind je hier ...

wat ik dus eigenlijk wil is dat als je over hokje 1 gaat dat dan hetzelfde gebeurt als dat je over hokje drie gaat, alleen dan voor de hele <tr> en niet alleen voor die ene <td> ook wil ik datzelfde lijntje eromheen hebben ...

dat lijntje heb ik geen idee waarom dat niet wil, maar die achtergrond kleur gaat volgens mij niet omdat de twee <td> allebei een verschillende achtergrond kleur hebben, iemand enig idee ?

ik heb al de search gebruikt maar daar kon ik niet alles op vinden

zo ziet de tabel eruit:

code:

<table cellspacing="0" cellpadding="0" style="border: 1 solid #666666">
  <tr height="25" onMouseOver="this.style.backgroundColor='#adadd1'; this.style.border='1 solid #000000'" onMouseOut="this.style.backgroundColor='#ffffff';this.style.border='1 solid #ffffff'">
    <td bgcolor="#cccccc" width="25"><br></td>
    <td bgcolor="#ffffff" width="150">Eerste Hokje</td>
  </tr>
  <tr height="25" bgcolor="#ffffff" onMouseOver="this.style.backgroundColor='#adadd1'; this.style.border='1 solid #000000'" onMouseOut="this.style.backgroundColor='#ffffff';this.style.border='1 solid #ffffff'">
    <td><br></td>
    <td>Tweede Hokje</td>
  </tr>
  <tr height="25">
    <td bgcolor="#cccccc"><br></td>
    <td bgcolor="#ffffff" onMouseOver="this.style.backgroundColor='#adadd1'; this.style.border='1 solid #000000'" onMouseOut="this.style.backgroundColor='#ffffff';this.style.border='1 solid #ffffff'">Derde Hokje</td>
  </tr>
</table>

als dit een sciptje zou kunnen dat gelijk voor alle <tr> geldt, zou dat helemaal toppie zijn !

zaterdag 29 december 2001 16:25

Acties:

Verwijderd

Die die style background change moet je dan koppelen aan dat eerste hokje... moet op 1 of andere manier kunnen...
Check anders effe de behaviours van DW

zaterdag 29 december 2001 16:43

Acties:

Verwijderd

Topicstarter

DW ?

zaterdag 29 december 2001 16:47

Acties:

Verwijderd

Topicstarter

maar dat kan dus niet zo makkelijk als ik denk dat het gaat

zaterdag 29 december 2001 16:49

Acties:

Verwijderd

Macromedia Dreamweaver...

Maar zelf schrijven is leuker, en heel veel werk is het niet.
Bagin met elke <tr> en <td> een id attribute mee te geven, dat script een stuk makkelijker. Kies dan meteen iets logisch, zoals:
<tr id="rowA">
en
<td id="celA1">
enzo.

zaterdag 29 december 2001 17:19

Acties:

Verwijderd

Topicstarter

code:

<script language="javascript">
function menu(cell)
{
cell.style.backgroundColor='#adadd1';
}
</script>

</head>

<body bgcolor="#ffffff">

<table cellspacing="0" cellpadding="0" style="border: 1 solid #666666">
  <tr height="20" onMouseOver="menu('a1')">
    <td bgcolor="#cccccc" id="a1" width="20"><br></td>
    <td bgcolor="#ffffff" id="a2" width="150">Tweede Hokje</td>
  </tr>
</table>

dat heb ik nu gemaakt, maar die werkt natuurlijk niet

er staat ook nog niet alles in, maar als ik dit aan de gang heb, kom ik er zelf wel uit ...

zaterdag 29 december 2001 21:19

Acties:

Verwijderd

Topicstarter

niemand

zaterdag 29 december 2001 21:23

Acties:

Dennis

Op zaterdag 29 december 2001 21:19 schreef MinardiFan het volgende:
niemand

Rustig aan hè

zaterdag 29 december 2001 21:29

Acties:

Verwijderd

Topicstarter

sorry, niet meteen boos worden

zaterdag 29 december 2001 22:09

Acties:

Verwijderd

Topicstarter

HIER staat een nieuwe versie, zoals je in de broncode ziet is dit niet erg handig omdat ik geen javascript gebruikt heb ...
maar voor de mensen die scherp zien (ook voor de mensen die niet scherp zien

) zie je dat als je over een <tr> gaat, er twee pixels nog steeds de verkeerde kleur hebben

ik kan dit oplossen simpel door een plaatje van 1x1 px voor het grijze vlak te gebruiken, dit rek ik dan, maar ik wil het liefst geen plaatjes gebruiken, maar ik wil dat juist niet zodat het een uitdaging is !

zaterdag 29 december 2001 22:38

Acties:

Verwijderd

Topicstarter

Afbeeldingslocatie: http://members.home.nl/kruijss/kutzooifuckpixels.gif

ter verduidelijking

zondag 30 december 2001 12:09

Acties:

Dennis

Hmmmmmz, ik snap het probleem nu en ga er ff naar kijken. Maar het is nog steeds javascript wat je gebruikt hoor

[edit]
Heb ff zitten stoeien met bepaalde dingen, maar het lijkt erop dat je er niks aan kan doen, simpelweg omdat die 2 pixels bij de border-right horen (maar daar was je ook al achter).

TD tags ondersteunen geen margins en paddings, iets wat in dit geval misschien wel een oplossing had geboden. Ik denk nu dus dat je het niet kan verbeteren.

Mag ik je er verder op wijzen dat je code nogal IE-only is trouwens, want in Mozilla werkt het dus niet

zondag 30 december 2001 12:28

Acties:

Verwijderd

Topicstarter

ja zoiets dacht ik dus al, dat dit niet echt voor alle browsers was

zondag 30 december 2001 12:30

Acties:

Dennis

Op zondag 30 december 2001 12:28 schreef MinardiFan het volgende:
ja zoiets dacht ik dus al, dat dit niet echt voor alle browsers was

Nog iets leukers: er ís wel degelijk een oplossing voor

code:

1	tabelcel.className = "css_class";

Zet dit in een <script>, en je kunt het aanroepen met 1 parameter

zondag 30 december 2001 19:50

Acties:

Verwijderd

Topicstarter

sorry dat vat ik even niet, ik ben niet zo Jaffa-Held, dus het is altijd improviseren ...

zou je daar een klein voorbeeldje van kunnen maken ?

hoeft maar heel simpel te zijn, dat bij de rest inbouwen moet wel lukken

zondag 30 december 2001 21:40

Acties:

Verwijderd

Topicstarter

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>menu</title>

<script language="javascript">
function over(cell)
{
links = eval(cell + 1);
rechts = eval(cell + 2);
links.style.backgroundColor='#adadd1';
rechts.style.backgroundColor='#adadd1';
return true;
}
</script>

</head>

<body bgcolor="#ffffff">

<table cellspacing="1" cellpadding="0" style="border: 1 solid #666666">
  <tr height="18" onMouseOver="over('a')">
    <td bgcolor="#cccccc" id="a1" width="18"><br></td>
    <td bgcolor="#ffffff" id="a2" width="150">&nbsp;Eerste Hokje</td>
  </tr>
  <tr height="18" onMouseOver="over('b')">
    <td bgcolor="#cccccc" id="b1" width="18"><br></td>
    <td bgcolor="#ffffff" id="b2" width="150">&nbsp;Tweede Hokje</td>
  </tr>
</table>

</BODY>
</HTML>

ik heb iets helemaal nieuws gemaakt, wat zeven keer zo simpel is en eigenlijk nog mooier

nou heb ik nog geen onMouseOut functie, maar kan ik een makkelijk onMouseOut functie maken die alles weer hersteld zoals het was voordat de functie over is uitgevoerd ?

maandag 31 december 2001 07:15

Acties:

Dennis

Op zondag 30 december 2001 21:40 schreef MinardiFan het volgende:
code:
1
code
ik heb iets helemaal nieuws gemaakt, wat zeven keer zo simpel is en eigenlijk nog mooier

nou heb ik nog geen onMouseOut functie, maar kan ik een makkelijk onMouseOut functie maken die alles weer hersteld zoals het was voordat de functie over is uitgevoerd ?

Ja, sla eerst de oorspronkelijke waarden op in variabelen en roep ze daar vervolgens weer uit aan

Dus dan krijg je een soort van tijdelijke opslag

maandag 31 december 2001 17:27

Acties:

Verwijderd

Topicstarter

ik heb nog wat aangekloot, en inmiddels drie browsers geinstalleerd

- IE 6
- Netscape
- Opera 5.12 (de laatste versie)

maar zelfs de achtergrond verandert ie dan niet

zijn die andere browsers dan zo kl*te ?
en elk geval, is er een andere manier om de achtegrondkleur te laten veranderen die ook voor andere browsers geldt dan IE ?

maandag 31 december 2001 20:38

Acties:

Verwijderd

Topicstarter

met andere woorden: kun je dit cross-browser maken ?

dinsdag 1 januari 2002 21:40

Acties:

Verwijderd

Topicstarter

ik heb nog wat aan het scriptje gemaakt, maar hierbij geeft ie telkens 2x dezelfde foutmelding "links.style is niet gedefinieerd" ...

dit staat in de header:

code:

<script language="javascript">
function over(cell)
{
links = eval(cell + 1);
rechts = eval(cell + 2);
links.style.backgroundColor='#adadd1';
rechts.style.backgroundColor='#adadd1';
return true;
}

in de body staat het volgende:

code:

  <tr height="18" onMouseOver="over('11')" onMouseOut="out('11')">

<td bgcolor="#cccccc" id="111" width="18"><br></td>
<td bgcolor="#ffffff" id="112" width="150">&nbsp;Eerste Hokje</td>

iemand een oplossing ?

dinsdag 1 januari 2002 21:49

Acties:

crisp

Devver

Pixelated

Misschien een probleem omdat het allemaal cijfers zijn?
crossbrowser moet je denk ik echt op model-level gaan aanspreken:
DOM: document.getElementById(links).style.backgroundColor='#adadd1'
IE (!DOM): document.all[links].style.backgroundColor='#adadd1'
NS (!DOM): ik weet niet of je dit met document.layers op kan lossen, aangezien een cell geen layer is. Layers in tabellen heeft NS4 ook veel moeite mee...

Intentionally left blank

dinsdag 1 januari 2002 21:55

Acties:

Verwijderd

Topicstarter

dinsdag 1 januari 2002 21:56

Acties:

Verwijderd

Topicstarter

maar het moet toch nog steeds kunnen als het allemaal cijfers zijn

dat zou eigenlijk geen obstakel moeten zijn, hoe kan ik dat oplossen ?

dinsdag 1 januari 2002 22:08

Acties:

crisp

Devver

Pixelated

probeer het eens met cell + '1'

edit:

Toch ff geprobeerd, maar als het allemaal cijfers zijn krijg ik toch een error, als ik letters gebruik (eventueel in combinatie met een cijfer) niet...

Intentionally left blank

dinsdag 1 januari 2002 22:12

Acties:

Verwijderd

Topicstarter

nee dat helpt ook niet

het heeft meer met de variabele cell te doen denk ik eigenlijk, waarom kan dat geen cijfer zijn ? (dat cijfer gebruik ik als string dus dat maakt niets uit toch ?)

dinsdag 1 januari 2002 22:14

Acties:

crisp

Devver

Pixelated

Op dinsdag 01 januari 2002 22:12 schreef MinardiFan het volgende:
nee dat helpt ook niet
het heeft meer met de variabele cell te doen denk ik eigenlijk, waarom kan dat geen cijfer zijn ? (dat cijfer gebruik ik als string dus dat maakt niets uit toch ?)

Blijkbaar wel, toch maar een letter ervoor zetten dus...

Intentionally left blank

dinsdag 1 januari 2002 22:23

Acties:

Verwijderd

Topicstarter

dat moet toch wel op te lossen zijn, of niet ?
hulp gevraagd van ervaren javascripters

dinsdag 1 januari 2002 22:50

Acties:

Verwijderd

Topicstarter

ik weet het al, de waarde van een var mag niet met een cijfer beginnen

Pagina: 1

Reageer