# Mouseover Effekte bei einer Tabelle



## TheSearch (16. September 2003)

Hallo!

Die Frage ist ziehmlich blöde... aber ich find die Lösung einfach nicht?!

Ich möchte in einer Tabelle Mouseover Effekte einfügen und zwar wenn die Maus über das Feld geht soll das gesamte Feld und die Schrift die Farbe ändern. Ich habs mit CSS probiert aber irgendwie gings nicht.... wahrscheinlich war ich zu blöd*g*
Ich habe mal eine Seite angefügt wie es aussehen soll...

Danke im Vorraus!

Mfg


----------



## Thomas Lindner (16. September 2003)

```
<html>
<head>
	<title>Untitled</title>
<script type="text/javascript" language="JavaScript1.2">
function an(wer)
{
document.getElementById(wer).bgColor = 'yellow';
document.getElementById(wer).style.color = 'red';
}
function aus(wer)
{
document.getElementById(wer).bgColor = 'white';
document.getElementById(wer).style.color = 'black';
}
</script>
</head>
<body>
<table cellspacing="2" cellpadding="2" border="1">
<tr id="eins" onmouseover="an('eins')" onmouseout="aus('eins')">
    <td>Zeile 1</td>
</tr>
<tr id="zwei" onmouseover="an('zwei')" onmouseout="aus('zwei')">
    <td>Zeile 2</td>
</tr>
<tr id="drei" onmouseover="an('drei')" onmouseout="aus('drei')">
    <td>Zeile 3</td>
</tr>
</table>



</body>
</html>
```


----------



## TheSearch (16. September 2003)

Danke!


----------



## Thomas Lindner (16. September 2003)

STRIKE !

Ich bin *fatalus* , *Crono*  und *Nuimundo*  zuvorkommen


----------



## Fabian H (16. September 2003)

Im Mozilla geht sogar das:

```
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.1 Transtitional//EN">
<html>
<head>
<style type="text/css">

.zelle {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Arial;
}

.zelle:hover {
  background-color: #0000FF;
  color: #F0F0F0;
  font-family: Times New Roman;
}

</style>
</head>
<body>

<table width="400" height="400">
    <tr>
        <td class="zelle">&nbsp; bla bla</td>
        <td>blabla</td>
        <td>gh</td>
    </tr>
</table>

</body>
</html>
```


----------



## TheSearch (18. September 2003)

> _Original geschrieben von Thomas Lindner _
> *
> 
> STRIKE !
> ...


Wie bitte? Ich habe mich nur an Punkt 5 der Postregeln gehalten! Und Offtopic kann ein Danke nie sein!


----------



## Thomas Lindner (18. September 2003)

@ Search:

Nein, das "offtopic" fgalt nicht Dir sondern meinem Posting, das als Offtopic zu betrachten war!


----------



## Consti (5. September 2004)

> _Original geschrieben von Fabian Hofmann _
> *Im Mozilla geht sogar das:
> *
> 
> ...



In Opera auch, jedoch im IE nicht


----------



## elnwtt (5. September 2004)

hi @ll    !

look this site ---> js nix nötig und hier spielt auch der IE mit 

greetz 4 @ll

Elena


----------



## Fabian H (5. September 2004)

Consti: Wie kommst du jetzt drauf, nen ein Jahr alten Thread auszugraben?



> *js nix nötig* und hier spielt auch der IE mit


Und was sind dann _onmouseover_ und _onmouseout_?
CSS-Handler?


----------



## elnwtt (5. September 2004)

nimm's nicht so genau...ist nur im übertragenen sinne gemeint (---> bessere alternative zu js mo)...
hmmm...jaaa...also...seid ihr alle so sehr angriffs-lustig in diesem verein hier !? 
habe ich grad so festgestellt   , als ich eben (als "grünschnabel" oder sowas ähnliches) die threads hier abgraste

junges blut,...immer cool bleiben  

have fun  

greetz Elena


----------



## Thomas Lindner (5. September 2004)

> _Original geschrieben von elnwtt _
> *nimm's nicht so genau...ist nur im übertragenen sinne gemeint (---> bessere alternative zu js mo)...
> hmmm...jaaa...also...seid ihr alle so sehr angriffs-lustig in diesem verein hier !?
> habe ich grad so festgestellt   , als ich eben (als "grünschnabel" oder sowas ähnliches) die threads hier abgraste
> ...



Das war soweit ich das einschätze nicht als Angriff gegen Dich zu sehen, aber es ist nun einmal so, das es definitiv nicht sehr hilfreich ist, wenn du hier Sachen postest, die sachlich/inhaltlich total falsch sind, weil sich die User im Regelfall darauf verlassen, das die Aussagen hier ziemlich korrekt sind.

Und da sowohl die Eventtypen, als auch this.blablabla JavaScriptelemente sind, ist es JavaScript und keine JavaScript freie Variante!

Niocht für ungut!

LG

Thomas


----------



## xxenon (5. September 2004)

Ich würde vorschlagen, auf JavaScript zu verzichten und einen Link in die Tabellenzelle einfügen.

Mit Hilfe des Attributes "display" kann erreicht werden, dass der Link die gesamte Zelle ausfüllt und diese Variante funktioniert auch in allen gängigen Browsern.

Bestes Beispiel ist tutorials.de, wo das Menu auch auf diese Art und Weise realisiert ist.



```
<html>
<head>
<title></title>
<style type="text/css">

  #menu a
    {
    color:red;
    background-color:black;
    display:block;
    width:100%;
    height:100%;
    }

  #menu a:hover
    {
    color:black;
    background-color:red;
    }

</style>
</head>
<body>
<table id="menu">
<tr>
<td><a href="">hall&ouml;le</a></td>
</tr>
</table>
</body>
</html>
```



MfG.  xxenon


----------



## Thomas Lindner (5. September 2004)

> _Original geschrieben von xxenon _
> *Ich würde vorschlagen, auf JavaScript zu verzichten und einen Link in die Tabellenzelle einfügen.
> 
> Mit Hilfe des Attributes "display" kann erreicht werden, dass der Link die gesamte Zelle ausfüllt und diese Variante funktioniert auch in allen gängigen Browsern.
> ...




FULL  ACK!

Ich erlaube mir trotzdem jetzt mal diesen aus der Versenkung geholten Thread zu schliessen, wei alle Fragen wurden geklärt!


----------

