nicht angemeldet
Tabellen zeile verlinken und makieren
Hi,
Ich würde es gerne haben, dass eine komplette Zeile einer Tabelle ein Link ist, und das wenn man über sie fährt die Zeile makiert wird.
Das sie makiert wird, habe ich schon mit onmouseover bzw. out versucht, hat aber nicht so richtig funktioniert.
Danke für eure Hilfe.
Grüße
Sebastian
-
Hallo Sebastian,
Ich würde es gerne haben, dass eine komplette Zeile einer Tabelle ein Link ist, und das wenn man über sie fährt die Zeile makiert wird.
Ein Blick in die "neue" Forum-FAQ sollte dir weiterhelfen:
https://forum.selfhtml.org/?t=104959&m=647919Danke für eure Hilfe.
Bitte, gern geschehen.
Grüsse
Frankie-
Ich würde es gerne haben, dass eine komplette Zeile einer Tabelle ein Link ist, und das wenn man über sie fährt die Zeile makiert wird.
Ein Blick in die "neue" Forum-FAQ sollte dir weiterhelfen:
https://forum.selfhtml.org/?t=104959&m=647919Soweit ist das gesehen habe wird aber so nur eine Zelle eingefärbt bzw. verlinkt. Ich hätte es aber gern, dass wenn man auf eine Zelle in der Zeile fährt, die ganze Zeile eingefärbt wird und nicht nur die entsprechende Telle.
Grüße
Sebastian
-
Hallo Sebastian,
Soweit ist das gesehen habe wird aber so nur eine Zelle eingefärbt bzw. verlinkt. Ich hätte es aber gern, dass wenn man auf eine Zelle in der Zeile fährt, die ganze Zeile eingefärbt wird und nicht nur die entsprechende Telle.
Ok, verstehe. Habe sowas schonmal versucht umzusetzen und mich dabei an einem Skript welches phpMyAdmin auch verwendet orientiert. Das ganze läuft nur mit aktiviertem JS.
Das Script wird eingesetzt in den Tabellenzeilen _unterhalb_ der Navigationsleiste. Es gibt 4 Stati: hover = mintgrün färben, click = orangegelb färben, doppelklick = markieren, übernommen = gelb ... Da die Seite und auch der JS-Code dynamisch generiert werden hilft wirklich nur der Blick in den Quellcode meiner Seite um die Funktionsweise zu verstehen, aber kompliziert ist es nicht.
Grüsse
Frankie-
Hi,
Ok, verstehe. Habe sowas schonmal versucht umzusetzen und mich dabei an einem Skript welches phpMyAdmin auch verwendet orientiert. Das ganze läuft nur mit aktiviertem JS.
und vermutlich nur im IE - Firefox meldet zwar keinen Fehler, ändert aber auch nix.
Aber mal zum Grundsätzlichen: ein Link kann nicht über eine ganze Tabellenzeile gehen. Um tatsächlich die ganze Zeile zu verlinken, muß der Link in jeder einzelnen Zelle wiederholt werden.
Um den Hintergrundwechsel über die komplette Zeile zu ermöglichen, reicht für moderne Browser wie gesagt tr:hover. Kombiniert man dies mit einem kleinen Script für den IE, sieht das Ganze (jetzt ohne Verlinkung) z.B. so aus: http://www.1ngo.de/web/em.html#px2em. Der Vorteil ist, daß Javascript nur für den IE benötigt und der Quelltext nicht unnötig mit Eventhandlern vollgestopft wird.freundliche Grüße
Ingo-
Aber mal zum Grundsätzlichen: ein Link kann nicht über eine ganze Tabellenzeile gehen. Um tatsächlich die ganze Zeile zu verlinken, muß der Link in jeder einzelnen Zelle wiederholt werden.
Ist es denn möglich, das wenn man in einer spalte der zeile einen link überfährt und er unterstrichen wird, die links in der restlichen zeile auch unterstrichen werden?
Um den Hintergrundwechsel über die komplette Zeile zu ermöglichen, reicht für moderne Browser wie gesagt tr:hover. Kombiniert man dies mit einem kleinen Script für den IE, sieht das Ganze so aus [...]
Wie könnte denn ein entsprechendes Javascript für den IE aussehen?
Grüße
Sebastian
-
Hallo,
Wie könnte denn ein entsprechendes Javascript für den IE aussehen?
Na, genau so: http://www.1ngo.de/web/em.html#px2em wie von Ingo verlinkt. Er hat es dir doch in einem appetitlichen Happen angerichtet. Was erwartest du noch?
Grüße,
Jochen
-
Hi,
Na, genau so: http://www.1ngo.de/web/em.html#px2em wie von Ingo verlinkt. Er hat es dir doch in einem appetitlichen Happen angerichtet. Was erwartest du noch?
naja, ich muß zugeben, daß es dort nicht ganz so leicht zu finden ist, da ich es hinter die Tabelle gesetzt habe, um es nicht onload aufrufen zu müssen. Der Code ist aber recht simpel:
<!--[if IE]><script type="text/javascript"> [code lang=javascript] var TR = document.getElementsByTagName("TR"); for(var i=23; i>0; i=i-1) { TR[i].onmouseover=function() {this.style.backgroundColor = "white"} TR[i].onmouseout=function() {this.style.backgroundColor = "transparent"} }</script><![endif]-->[/code]
Die erste TR mit der Überschrift habe ich hier ausgespart.
Fortschrittlichen Browsern reicht hierfür das CSS:
#px2em tr:hover { background:white; } #px2em tr:first-child { background:transparent; }Und wenn alle Tabellenzellen Links mit display:block (und width:100% für den IE) enthalten würden, gäbe es auch überall das "Händchen"...
freundliche Grüße
Ingo-
Danke Ingo
Grüße
Seb
-
<!--[if IE]><script type="text/javascript">
[code lang=javascript] var TR = document.getElementsByTagName("TR");
for(var i=23; i>0; i=i-1) {
TR[i].onmouseover=function() {this.style.backgroundColor = "white"}
TR[i].onmouseout=function() {this.style.backgroundColor = "transparent"}
}> </script><![endif]-->[/code] Leider habe ich keine Ahnung von Javascripten. Könntest du mir desshalb kurz die funktionsweise der scriptes erklären, denn es funktioniert bei mir leider noch nicht. Danke Grüße Sebastian-
Hi,
<!--[if IE]><script type="text/javascript">
[code lang=javascript] var TR = document.getElementsByTagName("TR");
for(var i=23; i>0; i=i-1) {
TR[i].onmouseover=function() {this.style.backgroundColor = "white"}
TR[i].onmouseout=function() {this.style.backgroundColor = "transparent"}
}> > </script><![endif]-->[/code] > > Könntest du mir desshalb kurz die funktionsweise der scriptes erklären, denn es funktioniert bei mir leider noch nicht. Dieses Script wirkt auf die zweite (i>0) bis 24ste (i=23) Tabellenzeile (es wird ja von Null aus gerechnet) in der Seite. Diese Zahlen müßtest Du natürlich anpassen. Es ändert den Hintergrund von transparent nach weiss. Wenn Dein Hintergrund bereits weiss ist, bemerkst Du natürlich nichts davon. freundliche Grüße Ingo -- [[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Tanzschritte gesucht?](http://www.1ngo.de/tanz/);-)
-
-
-
-
-
-
-
hi Sebastian,
Soweit ist das gesehen habe wird aber so nur eine Zelle eingefärbt bzw. verlinkt. Ich hätte es aber gern, dass wenn man auf eine Zelle in der Zeile fährt, die ganze Zeile eingefärbt wird und nicht nur die entsprechende Telle.
Wenn du css benutzt kannst du
tr:hover{}
machen, allerdings geht das nicht im IE
MfG
-
-
-
Hallo Sebastian,
Ich würde es gerne haben, dass eine komplette Zeile einer Tabelle ein Link ist
ich weis nicht ob das so eine gute Idee ist. Links sind normalerweise eindeutig gekennzeichnet. Entweder unterstrichen, oder aus dem Kontext heraus zu erkennen. Zur Not erkenne ich einen Link noch am sich ändernden Mauszeiger. Warum willst du deinen Besucher so verwirren?
und das wenn man über sie fährt die Zeile makiert wird.
Das sie makiert wird, habe ich schon mit onmouseover bzw. out versucht, hat aber nicht so richtig funktioniert.Da bist du bist auf dem richtigen Weg. Was hast du versucht, und was hat nicht funktioniert?
Grüße,
Jochen