Tabelle: kompette Zelle als Link (Menü) nutzen

    Hallo,

    ich bastle gerade an meiner 1. Homepage.
    Bisher habe ich ein Menü über eine Liste realisiert, aber so wirklich gefällt mir das nicht.

    Ich würde gerne ein kleines Bild sowie einen dazugehörigen Text als Menü-Punkt nutzen.
    Ich hab jetzt mal testweise eine 1-spaltige Tabelle genommen und das Bild sowie den Menü-Text als Link in die Tabellenezelle geschrieben.
    Wenn ich jetzt den Link anklicke, klappt das auch.

    Wie kann ich denn den Link auf die ganze Tabellenspalte beziehen, also so, daß man irgendwo in die Zelle klickt und entsprechend weitergeleitet wird? Ich hatte gedacht, damit so etwas wie einen Button zu simulieren.


    Danke für Eure Hilfe!


    Liebe Grüße

    ComputerFee

    so vielleicht

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

    :wink:
    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

    Nach mir die Sinnflut

    wieso so kompliziert?

    bin irgendwie zu blööd um mir das vorzustellen?

    wie soll das aussehen

    in ner tabelle und dann

    Text + bild

    in einer zeile und das wenn man irgendwo in die zeile klick das das dann geht oder wie? :?

    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

    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

    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:


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

    Code
    #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:

    Code
    <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.