✔ Tabellenfelder als Links

[Gumbo]

Dennoch würde ich bei der Entwicklung einer Website eher davon ausgehen, dass mehr Benutzer ohne als mit JavaScript-Unterstützung unterwegs sind.

 

[Dr Dau]

Hallo!

@michaelsinterface, er hat aber nicht nichts von "kein <a>-TAG" gesagt. (blöder Satz *g*)
Sondern lediglich dass er die gesamte Zelle als Link haben will.
Und genau dieses wird mit dem von mir geposteten Code erreicht, egal WO man die Zelle anklickt.
Und wie schon beschrieben, ist &nbsp; nur zu einem Zweck in der Zelle, damit in z.b. Opera die Zelle auch angezeigt wird.
Damit dieses "Leerzeichen" in der Zelle jedoch nicht (wie bei Links üblich) unterstrichen angezeigt wird, dient die CSS-Anweisung "text-decoration: none;".

Prinzipiel könnte er auf die ID und Klassen auch verzichten.
Dann würde er es sich erparen id="navtable" bzw. class="navigation" in jede Tabelle bzw. Zelle einzutragen, welches deinem Code gegenüber erheblich weniger Arbeit machen würde.
Dann jedoch würden sich die CSS-Anweisungen auf alle Tabellen/Zellen beziehen.

@DJ Teac und Gumbo, ehrlich gesagt, auf Statistiken sch*** ich.
Die sagen lediglich aus dass der User in dem Augenblick JS aktiviert oder deaktiviert hat, nicht jedoch über sein allgemeines Surfverhalten.
Nur weil ich tutorials.de mit dem IE betrachte, heisst es noch lang nicht dass ich es bei anderen Seiten auch mache.
Wirklich zu verbergen habe ich auch nichts.
Und wenn ich Seiten ansehen will denen ich nicht vertraue, benutze ich Netscape/Mozilla, dort gibt es grad für solche Seiten ja die wundervolle Funktion "Profil wechseln".

Wie meine Vorredner und ich schon geschrieben haben, JS für die Optik ist OK, nicht jedoch für die Funktion der Seite.
Sprich: für die Navigation ist JS absolutes TABU, so erzielt man keine wirklichen Hits.
Und schon sind wir wieder bei den Statistiken.
Der User hat die Seite aufgerufen, aber hat er sie sich auch angesehen?!
Von solchen Seiten bin ich, nicht immer aber in der Regel, schneller wieder weg als wie ich sie mit Google gefunden habe.

Gruss Dr Dau

 

[Maik]

@Dr Dau: in der Frage von Eistee steht, dass die Felder (= Tabellenzellen) 25*25px, grün und ohne Inhalt sind. Weiter heisst es, dass beim Überfahren mit der Maus die Hintergrundfarbe in blau getauscht werden soll. Wichtiger aber: Jedes dieser Felder (= Tabellenzellen) soll einen klickbaren Link darstellen. Kein Link im Feld (= Tabellenzelle), sondern das ganze Feld (= Tabellenzelle) soll selbst als Link dienen.

An diese Vorgaben habe ich mich gehalten. Selbstverständlich funktioniert auch dein Modell einwandfrei. ;-]

Peace, maik.l

 

[Dr Dau]

Hallo!

@michaelsinterface
Also, die Zellen sind 25x25 gross.
Hintergrund der Zellen ist Grün.
Zellen haben Inhalt, allerdings nicht sichtbar (ist bei deinem Code aber auch so, Stichwort &nbsp; ).
Hintergrund der Zellen wechselt beim überfahren mit der Maus auf Blau.
OK, nicht die Zelle selbst, aber der komplette Inhalt ist anklickbar, lässt sich sogar auf den Border erweitern, hat also den gleichen Effekt wie deine Lösung.

An diese Vorgaben habe ich mich gehalten.

Habe ich auch gemacht, allerdings sind die "Vorgaben" auch recht dürftig.
Z.b. haben die Zellen einen Border? Wie sind die Zellen angeordnet? usw.

Selbstverständlich funktioniert auch dein Modell einwandfrei.

Gut, dann sind wir uns da ja schonmal einig.
Bleibt eigentlich nurnoch abzuwarten was Eistee dazu sagt.

Gruss Dr Dau

 

[saschaf]

Wie oft ist dieses Problem jetzt eigentlich schon hier im Forum gelöst worden? Was ist nur aus der Suchfunktion geworden?

 

[Eistee]

Ich meld mich auch nochmal zu Wort
Zunächst mal danke, für die vielen Antworten, aber ihr habt mich evtl. insofern falsch verstanden, als das hier alle davon ausgehen, dass die Größe aller Zellen auf 25px*25px festgelegt ist - ist aber nicht so
Die Zellen haben alle unterschiedliche Größe (die richtet sich nach dem jeweiligen Inhalt).
Welchen Code würdet ihr mir in diesem Fall empfehlen?

 

[Maik]

ihr habt mich evtl. insofern falsch verstanden, als das hier alle davon ausgehen, dass die Größe aller Zellen auf 25px*25px festgelegt ist - ist aber nicht so
Die Zellen haben alle unterschiedliche Größe (die richtet sich nach dem jeweiligen Inhalt).
Welchen Code würdet ihr mir in diesem Fall empfehlen?

Ich habe eine Tabelle mit z.B. 4 Feldern erstellt.
Jedes dieser Felder ist 25*25px groß. ... in den Feldern befindet sich kein Inhalt.

 

[Eistee]

Ich hab noch eine Frage zu diesem Thema
Und zwar hab ich meine Problem jetzt so gelöst:

onMouseOver="this.style.backgroundColor='#FFFFFF'" onMouseOut="this.style.backgroundColor=''" onClick="self.location.href='blablubb.html'"

das ganze dann natürlich im TD-tag

Nun zu meiner Frage:
Es funktioniert nun zwar alles, wie es soll, allerdings möchte ich gern, sobald man mit der Maus über eine solche Zelle fährt, dass, der Cursor sich in eine Hand verwandelt - wie von Links gewohnt.

Über style="cursor:hand " klappt es nicht

Welche Möglichkeiten hab ich noch?

 

[saschaf]

Schau mal hier rein. Da gibts ein kleines Beispiel zum Download. Da kannst du dir ansehen, wie man eine komplette Tabellenzelle mit CSS als Link hinbekommt. Auf Javascript kannst du getrost verzichten.

MfG

 

[Dr Dau]

Hallo!

@saschaf, deine Variante ist ja vom grunde her die gleiche wie meine, nur anscheinend hat Eistee meinen Code erst garnicht ausprobiert.
Denn sonst hätte er bemerkt dass sich die Zellen mit zunehmendem Inhalt auch vergrössern..... hiervon war allerdings zu Anfang keine Rede.

Wie seine Seite letztenendes aussehen soll, kann ja niemand erahnen.
Also kann man nur nach den bekannten Vorgaben arbeiten und danach ist mein Code, bzw. deiner, noch immer eine passende Lösung (ohne JS).

Gruss Dr Dau