nicht angemeldet
Hintergrundfarbe in Tabellenzellen ändern
Hallo beisammen,
ich habe folgendes Problem:
Tabellenzellen sollen beim überfahren mit der Mouse (mouseover bzw. mouseout) ihre Hintergrundfarbe ändern.
Der Haken:
Ich verwende ein Dreamweaver CSS in dem ich die "Alpha(Opacity=55)" definiert habe und die Hintergrundfarbe somit transparent wird.
Außerdem soll nicht nur der Text in der Tabellenzelle als Link zu verwenden sein, sondern auch die komplette Zelle als Link fungieren.
Gibt es für diese Problemstellung eine halbwegs einfach Lösung, die auch ein Anfänger wie ich realisieren kann?
Danke für eure Hilfe!
Gruß
Wolfgang
-
Hallo Wolfgang
1. Komplette Zeile als Link:
-sinnvollste Lösung: die weite des Links mit Stylesheet auf 100% setzen.
-idiotische Lösung, die manche Programme anbieten: für jeden td Tag auch noch einen Onclick handler eingeben, der wie der Link die Seite ändert, mit location.href='neue Addresse'2.Hintergrund ändern:
-bei wenigen Zellen/hoher Kompatibilität/geringer JavaScript Erfahrung:
für jeden td die zwei handler notieren und dann jeweils onMouse___="this.style.backgroundColor='farbangabe'"
-alternativ, d.h. weniger Text, aber inkompatibler kann man auch eine Funktion aufrufen, a lá onMouse___="chgColor(0 oder 1)" und dann im script bereich die funktionen definieren, und als inhalt z.B. event.srcElement.style.color= para ? "red" : "blue"; bzw. e.target.style... für NS6.
-bei sehr vielen Zellen/besserer Javascript erfahrung,
nichts in die TDs reinschreiben, sondern im Script eine Funktion schreiben, die mit document.onmouseover=makeHover; aufgerufen wird.
Dann abfragen, ob das Element ein TD Tag ist, (.nodeName="TD") und wenn es ein Link ist, überprüfen, ob das übergeordnete Element eine TD ist. (.parent.nodeName). Wenn du innerhalb der Zellen noch weitere Elemente hast, solltest du aber eine Schleife schreiben, die sich hocharbeitet und bei body aufhört. Dann wie gehabt mit .style die Farbe ändern und dann einen handler für den onmouseout zu dem TD hinzufügen, mit .onmouseout=delHover; Wichtig, keine Klammern hinter den Funktionsnamen. die Funktion delHover muss dann die Farbe wieder ändern und löschen, dass sie selbst aufgerufen wird: VariableVonmakeHover.onmouseout="";
Hab ich was vergessen... Ach ja die dritte Variante ist einem Script von http://www.dynamicdrive.com entnommen-
Hallo Wolfgang
- Komplette Zeile als Link:
-sinnvollste Lösung: die weite des Links mit Stylesheet auf 100% setzen.
-idiotische Lösung, die manche Programme anbieten: für jeden td Tag auch noch einen Onclick handler eingeben, der wie der Link die Seite ändert, mit location.href='neue Addresse'
2.Hintergrund ändern:
-bei wenigen Zellen/hoher Kompatibilität/geringer JavaScript Erfahrung:
für jeden td die zwei handler notieren und dann jeweils onMouse___="this.style.backgroundColor='farbangabe'"
-alternativ, d.h. weniger Text, aber inkompatibler kann man auch eine Funktion aufrufen, a lá onMouse___="chgColor(0 oder 1)" und dann im script bereich die funktionen definieren, und als inhalt z.B. event.srcElement.style.color= para ? "red" : "blue"; bzw. e.target.style... für NS6.
-bei sehr vielen Zellen/besserer Javascript erfahrung,
nichts in die TDs reinschreiben, sondern im Script eine Funktion schreiben, die mit document.onmouseover=makeHover; aufgerufen wird.
Dann abfragen, ob das Element ein TD Tag ist, (.nodeName="TD") und wenn es ein Link ist, überprüfen, ob das übergeordnete Element eine TD ist. (.parent.nodeName). Wenn du innerhalb der Zellen noch weitere Elemente hast, solltest du aber eine Schleife schreiben, die sich hocharbeitet und bei body aufhört. Dann wie gehabt mit .style die Farbe ändern und dann einen handler für den onmouseout zu dem TD hinzufügen, mit .onmouseout=delHover; Wichtig, keine Klammern hinter den Funktionsnamen. die Funktion delHover muss dann die Farbe wieder ändern und löschen, dass sie selbst aufgerufen wird: VariableVonmakeHover.onmouseout="";
Hab ich was vergessen... Ach ja die dritte Variante ist einem Script von http://www.dynamicdrive.com entnommen - Komplette Zeile als Link:
-