Hallo,

ich möchte gerne eine Tabellenzeile mit Text drine verlinken, wen jemand mit dem Mauszeiger drüber fährt, soll der Hintergrund eine andere Farbe bekommen und der Mausfeil so ein Linkhinweis mit Finger werden, aber auch schon wenn die Maus noch nicht über den Textlink gefahren ist, sonder schon wenn der Mauszeiger die Spalte der Tabelle mit dem Text berührt.

Hi!
Ich würde das mit javascript realisieren, indem du den EventHandlern Onmouseover, onClick und onmouseout die verschiedenen Ereignisse zuweist, d.h. Onmouseover ändert sich die Farbe, onmouseout ändert sie sich zurück und onclick öffnet sich der link. Ob sich letzteres so durchführen lässt weiß ich nicht, ersteres funktioniert aber.

Das kannst du auch über css realisieren.


td a
{ display: block;
width: 100%;
height: 100%;
background-color:#FFFFF;
}

td a:hover
{ display: block;
width: 100%;
height: 100%;
background-color:#000000;
}

Zitat von saschaf

Das kannst du auch über css realisieren.


td a
{ display: block;
width: 100%;
height: 100%;
background-color:#FFFFF;
}

td a:hover
{ display: block;
width: 100%;
height: 100%;
background-color:#000000;
}

Damit lässt sich aber nur der Textlink einfärben. Die gesamte Tabellenzelle wird nicht eingefärbt, und das ist es was er will. Die erste Lösung ist richtig. Ich mache das genauso. Das mit dem onClick funktioniert.

Also hier ist mal ein Beispiel mit einer GANZEN Zelle als Link.

Hallo saschaf,

echt super man, vielen Dank, funktioniert prima.

Wenn ich dann mal was für dich tun kann ne, du weist schon!

Npp

muss man sich mal agucken...

HI saschaf!
Erstmal danke für den "Trick" mit der css-Datei. Das klappt super.

Ich habe nur ein kleines Problem. Wie schafft man es, dass nicht alle Links mit der, in der css-Datei angegebenen Farbe hinterlegt sind und den selben Mouseover Effekt haben?

MFG
[AtC] greenapple

Das funktioniert mit Klassen. Und zwar so:

HTML-Code:

<td class="linkstyle1"> <a ....../a> </td>
<td class="linkstyle2"> <a......./a> </td>

CSS:

td.linkstyle1 a{....}
td.linkstyle1 a:hover {....}

td.linkstyle2 a{....}
td.linkstyle2 a:hover {....}

In den Klammern kannst du verschiedene Farben, Schriftarten, Rahmen und was weis ich noch alles definieren (So wie es auch im Beispiel oben ist). Das ganze funktioniert auch mit vielen verschiedenen Klassen.

Hey cool... Das funktioniert super Danke vielmals!

Aber ich hab jetzt noch ein Problem... Du kannst es dir ja auf meiner Homepage anschauen.

http://de.geocities.com/atcgreenapple/home.htm

Und zwar ist beim Mouseover die Schrift "hochgestellt", wie kann ich das so machen, dass ich die Schrift immer in der Mitte habe, und zwar nicht nur horizontal, sondern auch vertikal...

Wär' cool, wenn du mir da auch noch helfen könntest

Nochmals: DANKE!

Zuerst solltest du dir deinen Quelltext nochmal genau anschaun. Da sind sehr viele Fehler, z.B. Tags die nicht geschlossen werden. Und sieh dir deine Seiten immer mit verschiedenen Browsern an. "4 Webmaster" funktioniert z.B. im Firefox aber im IE wird der Link durch die breitere Schrift zweizeilig. Aber zu deinem Problem:

So "kann" es aussehen:

<td class="main" style="width:190px; height:50px; background-color:#008000;">
<a style="text-decoration:none;text-align:center; padding-top:10px" href="home.htm">HOME</a>
</td>

class="main" ... benutzt du ja zur Zeit nicht - kannst du auch weglassen
width, height .... hab ich mal mit in den Stylesheet genommen, denn dafür ist es ja da
background-color ... auch in der CSS-Variante
<p> und <font> ... hab ich rausgeschmissen, denn den p-Tag brauchst du garnicht und die Schriftart kannst du auch in der CSS-Datei festlegen.
text-align:center ... horizontales zentrieren
padding-top .... wird zur Ausrichtung in vertikaler Richtung verwendet. Ich benutze hier nicht "vertical-align" sondern "padding". Es wird also nicht wirklich zentriert, sondern nur ein Abstand nach oben definiert.

EDIT: Versuch so viel Styles wie möglich in die CSS-Datei zu packen, denn dort musst du alles immer nur einmal schreiben/ändern.

Hey, danke!

Also du musst wissen, ich bin noch Anfänger, was HTML und so angeht, deshalb hab ich bestimmt tausende Fehler auf der HP

Aber ich versuche jetzt mal deinen Tipp zu verwirklichen...

Nochmal THX !

Bezieht sich das wirklich auf eine ganze Tabellenzeile mit

HTML-Code:

<tr>
<td></td>
<td></td>
<td></td>
</tr>

mehreren Tabellenzellen?

Auch wenn der Topic den Eindruck erweckt, so war hier nicht die Rede davon, wie beim Überfahren einer Tabellenzeile der Hintergrund von mehreren Tabellenzellen getauscht werden kann.

Aber vielleicht stellst du dir das ja so vor?

Code :

1 2	tr.normal { background: red; color: black; } tr.normal:hover, tr.hover { background: black; color: white; }

Code :

1 2 3 4 5 6 7

<table border="1">        <tr class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'">            <td>Zelle 1</td>            <td>Zelle 2</td>            <td>Zelle 3</td>        </tr> </table>

Die CSS-Klasse .hover und das Script zum Tauschen der Klassen-Namen ist für den IE6 gedacht, da er die Pseudoklasse :hover lediglich für das a-Element unterstützt und mit dem Selektor tr.normal:hover nichts anfangen kann.