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

[stellenureinefrage]

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]

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]

Oder schau dir das einmal an:

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

funktioniert bei mir optimal.

 

[Fey]

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]

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]

Bitte helft mir !! Es ist dringend !

 

[freakcx]

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]

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]

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]

#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!