Tabelle: kompette Zelle als Link (Menü) nutzen

so vielleicht

<td onClick="window.location='seite.html' style="{cursor:hand}">

das geht aber nur in tabellenform weis nicht wie das bei frames ausieht ob das target=fenstername im td-tag auch funktioniert
oder es dafür eine andere Variante gibt

oje. da fällt mir leider keine bessere lösung ein, als alles mit leerzeichen aufzufüllen und die zu verlinken.....

wieso so kompliziert?

<table>
<tr>
<a href="seite.html" target="weisichwas">
<td>
inhalt des tds ;)
</td>
<td>
[img]deinbild[/img]
</td>
</a>
</tr>
</table>

bo0ntown.net:
weil das von der syntax nicht richtig ist was du da vor hast es geht zwar aber vom html standpunkt aus nicht richtig
Und dem user wird es als link nicht angezeigt

dann fügst du halt noch das ein:
<td style="cursor:pointer;"> und schon hast du deinen link...
den text muss man dann halt formatieren...

Moin!

Ihr seit da alle fürchterlich auf dem Holzweg, es geht viel einfacher.

ComputerFee schick mir mal bitte per PM den Quellcode, dann bau ich es dir ein und versuche auch zu erklären wie es geht, bzw. schick dir dann einen Link zu einer meiner HPs, wo ich es einsetze.

@alle anderen:
Mir geht ein Schlauermeier der seit einigen Tagen hier zu allem und jedem hier etwas schreibt ein wenig auf den Keks, da er m.E. zu viel Schrott schreibt und zu leicht gereizt ist (siehe seinen Dialog mit Mr. Java).
Ich bitte deshalb um Verständnis, daß ich mich in die Threads von diesem 'Kollegen' nicht einmische und meine Hilfe dann lieber per PM schicke, sofern das möglich ist.

Ronald

ähm... ich weiß nicht ob dir ronald schon geholfen hat, aber auch für alle anderen denens intressiert. so gehts:

<td onclick="window.location.href='seite2.html'"></td>

mfg
Rocco

Ich habe ihr was zugeschickt und ihrt auch ein Muster online gestellt, aber leider scheint sie zur Zeit verschollen, jedenfalls kommt kein Feedback.

Deine Lösung setzt auf Javascript auf, ich hatte ihr eine CSS-Variante geschickt.

G.a.d.M.

Ronald

Ronald, es wär ja noch nett wenn du deine Lösung postet,
damit jeder was davon hat.
Falls so eine Frage noch öfters auftauschen sollte.

Nun, die CSS-Formatierung ist zwar nicht so schwer, aber nie allgemeingültig, da beim Erstellen des CSS Faktoren wie die Größe der Button, Größe und Ausrichtung der Schrift, pp. individuell eingestellt werden müssen.

Von der Funktion her ist es einfach:
Man erstellt eine ganz einfache Tabelle nur mit den Links und entsprechenden Texten dazu.
Die komplette Tabelle bekommt eine id, welche in den Stylesheets definiert ist:

<table border=0 id="nav" cellspacing=2>
      <tr>
      <td>[url='seite1']Seite 1[/url]</td>
      </tr>
      <tr>
      <td>[url='seite2']Seite 2[/url]</td>
      </tr>
      <tr>
      <td>[url='seite3']Seite 3[/url]</td>
      </tr>
      <tr>
      <td>[url='seite4']Seite 4[/url]</td>
      </tr>
      <tr>
      <td>Comming soon...</td>
      </tr>
</table>

Die Stylesheets dazu sehen dann z.B. so aus:

#nav a, #nav a:visited{color:#FFFFFF; font-weight:bold; font-size:11px; text-decoration:none; text-indent:10px; line-height:23px; display: block; width: 160; height:25px; padding-left:0px; background-image:url(../img/button.gif);}


#nav a:hover, #nav a:focus, #nav a:active {color:#FF0000; background-image:url(../img/button1.gif); }

Die CSS bewirken, daß eine Tabellenzelle komplett zum Link wird und einen (unbeschrifteter) Button als Hintergrundgrafik erhält. Das gilt aber nur dann, wenn sich in der Zelle ein Link befindet, ansonsten tritt die Formatierung nicht ein.

Im Beispiel haben wir einen dunklen Button, deshalb nehmen wir eine fette weiße Schrift mit 11 Pixeln und ohne Dekoration. Mit text-ident wird die Schrift 10 Pixel nach rechts gerückt, damit es nett aussieht. Damit die Schrift horizontal mittig erscheint geben wir eine Linienhöghe von 23 Pixel vor, das ist 2 Pixel weniger, als der Button hoch ist. Dabei wird berücksichtigt, daß der Button unten 2 Pixel Schatten enthält und die Schrift somit nur optisch horizental mittig steht, tatsächlich ist sie nicht in der horizentalen Zellenmitte.

Mit "display:block" wird bewirkt, daß die komplette Zelle als Link fungiert. Anschließend wird noch die Zellengröße analog zur Größe des Button festgelegt, das bereits standardmäßig vorhandene Zellenpadding für den linken Rand auf 0 gesetzt. und die Hintergrundgrafik aus einem anderen Verzeichnis geladen (button1.gif).

Damit haben wir die Standardanzeige für alle Tabellenzellen dieser ID fertig und unter allen Links taucht automatisch der Button auf.

Im nächsten Schritt wird nun für den Hover-Effekt (aber auch wenn der Link focusiert oder aktiviert wird) eine neue Schriftfarbe festgelegt und ein andere Button benannt.

Das ist alles.

Vorteile:
- funktioniert ohne Javascript,
- man kann beliebig Zellen hinzufügen oder löschen, der Effekt ist automatisch immer richtig.

Nachteil:
- man kann keine verschiedenen grafischen Button benutzen

Ergänzen sollte man das ganze dann aber doch noch mit einem kleinen Javascript, damit der 'Hover-Button' bereits vorgeladen ist, wenn man mit der Mouse das erste Mal über einen Link fährt:

<script type="text/javascript" language="JavaScript">
   <!--
   b1= new Image();
   b1.src = "images/button1.gif";
   //-->
   </script>

voila ....

Ronald

EDIT:
Kleiner Nachtrag: Man kann natürlich anstatt eines Textlinkes auch einen (halb)-transparenten Grafik-Link über die Button legen, da die Button ja nur Zellenhintergrund sind. Auf diese Art kann man dann doch verschiedene grafische Button simulieren.