# tabellenspalte ändert bild bei mouseover! help pls!



## phil-ip (30. März 2005)

hi, suche nen code bei dem eine tabellenspalte ein hintergrundbild anzeigt, wenn man mit der maus drüber fährt. Wenn man nicht mit der Maus auf der Spalte ist, dann wird kein Bild angezeigt. Wie kann man dies umsetzen


----------



## SilentWarrior (30. März 2005)

HTML:
	
	
	



```
<td id="zelle1">...</td>
```
CSS:
	
	
	



```
#zelle1:hover {
    background-image:url('bild.gif');
}
```
Das funktioniert aber im IE nicht, für diesen musst du dir also wohl oder übel eine JS-Lösung einfallen lassen. (Es sei denn, du machst einen Link über die gesamte Tabellenzelle, aber das wäre auch nicht das Rosarote vom Ei.)


----------



## Maik (30. März 2005)

Hallo phil-ip,

da die Grafik erst beim mouseover angezeigt werden soll, ist es ratsam, einen Image-Preloader zu installieren, der sicherstellt, dass die Grafik im Browsercache liegt: 

```
<head>

<!-- Image-Preloader -->
<script type="text/javascript">
<!--
bgImage = new Image(150,20); // (Grafikweite,-höhe)
bgImage.src = "bgImage.jpg"; // Grafik-URI
//-->
</script>

</head>
<body>
```

Im zweiten Schritt erzeugst du im Style-Sheet die CSS-Klassen *.normal* und *.hover* für die Tabellenzelle mit den gewünschten CSS-Eigenschaften:

```
td.normal
{
width: 150px;
height: 20px;
background-color: #dfdfdf;
}

td.hover
{
width: 150px;
height: 20px;
background-image: url(bgImage.jpg);
}
```
Zuletzt notierst du in den <td>-TAGs die Attribute *class=*_"normal"_ , *onmouseover=*_"this.className='hover'"_ und *onmouseout=*_"this.className='normal'"_. 

Mit Hilfe der Script-Anweisung *this.className='[ KlassenName ]'* wird die entsprechende CSS-Klasse aufgerufen und so die Tabellenzelle dynamisch gestaltet:

```
<td class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'">Tabellenzelle</td>
```
[ Browsercheck: IE 5.5, Mozilla 1.6, NN 7.0, Opera 7.23 ]


greez, maik.l


----------

