# Tabellenzeile verlinken



## Npp (5. November 2004)

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.


----------



## Edemund (5. November 2004)

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.


----------



## saschaf (5. November 2004)

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;
}


----------



## Karl Förster (5. November 2004)

saschaf hat gesagt.:
			
		

> Das kannst du auch über css realisieren.
> 
> 
> td a
> ...



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.


----------



## saschaf (5. November 2004)

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


----------



## Npp (5. November 2004)

Hallo saschaf,

echt super man, vielen Dank, funktioniert prima.

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

Npp


----------



## mbecker (29. Dezember 2004)

muss man sich mal agucken...


----------



## greenapple (23. Februar 2005)

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


----------



## saschaf (23. Februar 2005)

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.


----------



## greenapple (24. Februar 2005)

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!


----------



## saschaf (25. Februar 2005)

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.


----------



## greenapple (25. Februar 2005)

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 !


----------



## topf (18. Dezember 2006)

Bezieht sich das wirklich auf eine ganze Tabellenzeile mit 

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

mehreren Tabellenze*ll*en?


----------



## Maik (18. Dezember 2006)

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?


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


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


----------

