# Bei Mouseover über Link in einer Zelle Zellenhintergrundbild ändern.



## stellenureinefrage (24. April 2004)

Hi 

wie mache ich dass wenn ich über einen link in einer zelle mouseovere das sich das zellenhintergrund bild ändert?

ist das möglich?

SG


----------



## Fabian H (24. April 2004)

Bitte suchen!

Das hier sollte klappen:

```
<td style="background-image:url(img1.png);" id="Zelle">
  <a href="foo" onmouseover="window.document.getElementById('Zelle').style['backgroundImage'] = 'url(img2.png)';"
     onmouseout="window.document.getELementById('Zelle').style['backgroundImage'] = 'url(img1.png)';">Foo</a>
</td>
```


----------



## max (27. April 2004)

Oder schau dir das einmal an:

http://css.maxdesign.com.au/listamatic/vertical11.htm 

funktioniert bei mir optimal.


----------



## Fey (27. April 2004)

Hallo,

ich hatte das mal auf einer Website so gelöst:


```
.menueCat a:link, a:active, a:visited {
     font-family:verdana,tahoma,sans-serif;
     font-size:9pt;
     color:#4295A0;
     background-image:url(../images/backLight.gif);
     text-decoration:none;
}

.menueCat a:hover {
     font-family:verdana,tahoma,sans-serif;
     font-size:9pt; 
     color:#FFFFFF;
     background-image:url(../images/backGreen.gif);
     text-decoration:none;
}
```

Der Tabellenzelle, in der der Link ist, gibst du die Klasse menueCat.

Gruß,
Melanie


----------



## VCF (2. November 2005)

Ich hätte da auch noch schnell eine Frage dazu: Wie mach ich das wenn der Link und das zu ändernde Bild (nicht Hintergrundbild der Zelle) in zwei verschiedenen zellen  sind


----------



## VCF (3. November 2005)

Bitte helft mir !! Es ist dringend !


----------



## freakcx (3. November 2005)

Du meinst warscheinlich eine Art Gallerie in Textform... Das glaub ich lässt sich hier mit recht einfach lösen:

http://www.destinedtodesign.com/gallery/

Deinen Wünschen entsprechend z.B so:


```
<table>
<tr>
      <td>
            <div id="gal_link_container">

                   <ul id="gal_link_container">
<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/bild01.jpg',0)">Textlink</a></li>
<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/bild02.jpg',0)">Textlink</a></li>
<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/bild03.jpg',0)">Textlink</a></li>

rest deiner links...
                   </ul>
             </div>
       </td>
<tr>
       <td>
<div id="gal_pic_container"><img src="gallery/bild01.jpg" alt="" border="0" name="enlarge" /></div>
         </td> 
</tr>
<table>
```

Nicht getestet so ungefair müsste das gehen habe jetzt aber nur schnell zusammen geschnippelt musst du gucken als Denkanstoß sollte es reichen!

So noch mal den Quellcode geändert anders gehts ja nicht da reload des Fensters(zumindest nicht so einfach)


----------



## VCF (6. November 2005)

Die Gallerie in Textform wäre wahrscheinlich schon das richtige, nur sollte das bild dann wieder wie beim mouseover effekt auf das erste Bild zurück springen und nicht so wie hier bleiben...

Ich möchte einfach einene Mouseover Effekt bei dem der Text den ich hovere die Farbe ändert und ein Bild irgendwo anders auf der Page, in meinem Fall ein Auto das die Scheinwerfer anmacht, sich ändert...


----------



## freakcx (8. November 2005)

Das ist alles kein Problem das lässt sich mit meinem Beispiel realisieren, bisschen umcoden musst du dass schon selbst. Ich backe dir keine fertigen Brötchen dass musst du schon selbst hin kriegen!


----------



## freakcx (8. November 2005)

```
#auto a
{
display:block;
background-image: url(auto.gif);
position:absolute;
border: 0px;
width: 213px;
height: 153px;
}

#auto a:hover
{
display:block;
background-image: url(auto_hover.gif); no-repeat top;
position:absolute;
border: 0px;
width: 213px;
height: 153px;
}
```

Das noch als kleine Hilfe den rest musst du schon allein lösen!


----------

