# onmouseover für tabelle?



## bruderherz (7. November 2002)

ich hab mal-hab vergessen auf welcher page-gesehn dass wenn man über den link fährt, nicht nur der hintergrund des linkes sondern auch der ganzen tabellenzelle sich ändert, ich habs mal versucht und onmouseover der tabellenzelle übergeben, aber es ging nicht! wie geht das? geht das gar nicht mit onmouseover oder hab ich was falsch gemacht?


----------



## Christoph (7. November 2002)

in den TD-TAG
	
	
	



```
onMouseOver="this.style.backgroundColor="#003366"
```

das hilft 

natürlich auch onmouseout kann verwendet werden :]


----------



## bruderherz (7. November 2002)

ok, danke!=)


----------



## Christoph (7. November 2002)

bitte  kein Problem


----------



## bruderherz (7. November 2002)

hmm....irgendwie gehts nicht, ich hab mal ein beispiel dafür gemacht, das nicht geht!

<html>
<head>
<title>tabelle</title>
</head>
<body>
<table border=0 bgcolor=black>
<tr>
<td onMouseover="this.style.backgroundColor="white">
hallo
</td>
</tr>
</table>
</body>
</html>

was hab ich falsch gemacht?


----------



## Christoph (7. November 2002)

```
<td onMouseOver="this.style.backgroundColor='#3A3A3A'; this.style.cursor='hand';" 

onMouseOut="this.style.backgroundColor='#333333'">

asdfasdfasdf
<br>sdf<br>asfasdfas fasdf asd fasdf</td>
```

 muss man euch alles machen


----------



## Ossi (10. November 2002)

Interessant wäre noch, wenn man zusätzlich beim Anklicken der sich farbändernden Tabellenzeile eine URL anspringen könnte. Geht das (z.B. mit onClick) und wenn ja, dann bitte die Definition erweitern. Wäre eine einfache Lösung für eine Navigation ohne Untermenüs.


----------



## Adam Wille (10. November 2002)

Wo ein Maus-Event möglich ist, sollten in JavaScript auch alle anderen Maus-Events möglich sein...

```
<td onmouseover="this.style.backgroundColor='#3A3A3A'" onmouseout="this.style.backgroundColor='#333333'" onclick="location.href='blablubb.html'">
```
hth,
Geist


----------



## simu (10. November 2002)

wieso nicht mit css?

css:

```
td a {
display:block;
width:100%;
background-color: #fff;
color: #999; }

td a:hover {
background-color: #ddd;
color: #000; }
```

html:

```
<td>
<a href="url.html">testlink</a>
</td>
```


----------



## Ossi (10. November 2002)

CSS würde ich besser finden, nur funktioniert es irgendwie nicht. Wo ist der Fehler:

*Head:*

<style type="text/css">
td_a
{
display: block;
width: 100;
background-color:_#E0EFD4;
color: #E0EFD4;
}
td_a: hover
{
background-color:_#008400;
color: #008400;
}
</style>

*Body:*

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100" height="30">
      <div align="center"><a href="temp.html" target="mainFrame">Begriff 1</a></div>
    </td>
    <td width="100" height="30">
      <div align="center">Begriff 2</div>
    </td>
    <td width="100" height="30">
      <div align="center">Begriff 3</div>

usw. usw. </table>

Wozu ist die 2. Farbangabe (color)? Ich möchte, daß die Tabellenzelle ohne Mausberührung #E0EFD4 und bei Hover #008484 aussieht?


----------



## Ossi (10. November 2002)

Also in JavaScript klappt die Sache. Mir fehlt nur noch die Anweisung, die URL im mainFrame zu öffnen.

Hier das Beispiel:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100" height="30" onMouseover="this.bgColor='#008400'" onMouseout="this.bgColor='#E0EFD4'" onclick="location.href='../temp.html target=mainFrame'"><div align="center">Begriff 1</div></td>

Wie muß ich den mainFrame adressieren, ohne dem funktioniert es??????????


----------



## soraxdesign (10. November 2002)

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="100" height="30" onMouseover="this.bgColor='#008400'" onMouseout="this.bgColor='#E0EFD4'" onclick="location.*main*.href='../temp.html target=mainFrame'"><div align="center">Begriff 1</div></td> 

probier das ma


----------



## simu (10. November 2002)

td_a 
{ 
display: block; 
width: 100; 
background-color#E0EFD4; 
color: #E0EFD4; 
} 
td_a: hover 
{ 
background-color#008400; 
color: #008400;
}


----------



## Ossi (11. November 2002)

*simu* hat gewonnen !!!!!!!!!!!!!!

Mit CSS funktioniert es, bei Java kann der Browser irgend etwas mit der Definition des Frames nicht anfangen.
Nun muß ich nur noch den Unterstreichungsstrich "weg-cascaten", aber das ist kein Thema.


Besten Dank für die Hilfe - Super Forum hier.


----------



## Adam Wille (11. November 2002)

Du bist dir aber bewusst, dass das nicht am Unvermögen von JavaScript  ( merke: Java != JavaScript) liegt, sondern an deinem? 

Btw: Wir alle kennen das Ausrufezeichen, den Zwinker-Smilie und deren Bedeutung...no need to spam 

Geist


----------



## Ossi (12. November 2002)

O.K. - ich habe dann doch das Beispiel in *JavaScript* genommen und nur noch die Unterstreichungen wegcascadiert . Nun muß ich nur noch den Pixelrahmen beim Internet Explorer mit JavaScript verschwinden lassen, aber da habe ich schon was gefunden.


----------



## Adam Wille (12. November 2002)

Die Praast'sche JavaScript-FFQ, nehme ich an? 

Geist


----------



## noisy (5. Januar 2005)

Moin,

also ich habe bei mir die Variante mit dem CSS genommen.... klappt soweit auch ganz gut... allerdings haut der mir da einen üblen Umbruch rein und ich weiss net so genau wie ich den da raus bekomme.... jemand ne idee?

Hier klicken und das Beispiel ist die linke Navigation 

Das dazugehörige CSS sieht folgendermassen aus:


```
.sublevel{
	padding-left: 5px;
	display:block;
}

a.sublevel:link, a.sublevel:visited {
		color: #003399;
		text-decoration: none;	
}

a.sublevel:hover {
		color: #003399;
		background-color: #FFFFFF;
		text-decoration: none;
}

a.sublevel:active {
		color: #003399;
		background-color: #FFFFFF;
		text-decoration: none;
		font-weight: bold;
}
```

Das ganze läuft in einem CMS System (Mambo) und fas einzige was nicht funktioniert ist halt, dass ich den Zeilenumbruch nicht wegbekomme.... any suggestions?

so long

noisy


----------

