table-bg bei cell-mouseover wechseln?

[futuretec]

Hallo!

Ich habe eine Tabelle mit 6 Zellen - Tabelle hat die formatierung per css ->

#menutable {
background-image: url(tab.gif);
width: 900px;
height: 60px;
}

nun soll beispielsweise die zelle <td id="zelle1"> machen --> background-image=tab2.gif (von #menutable) - die zelle <td id="zelle2"> --> background-image=tab3.gif -- usw.

hoffe das geht ^^ es muss wirklich der ganze bg der tabelle geswichted werden - nicht nur der cell-bg

cu & thx
futuretec

 

[threadi]

Möglichkeit 1:
Mit CSS:

#zelle1:hover { background-image: url(neuesbild.gif);

Nachteil: geht nicht im IE

Möglichkeit 2:
Mit JavaScript. Eventhandler im <td>-Tag unterbringen:

onmouseover="javascript:this.style.backgroundImage='url(neuesbild.gif)';" onmouseout="javascript:this.style.backgroundImage='url(originalbild.gif)';"

Nachteil: geht nicht wenn jemand JavaScript abgeschalten hat.

 

[futuretec]

oh mann xD

das mag vllt so geklungen haben aber ich bin schon länger mit diesem bereich vertraut - was du mir jetzt aufgezeigt hast wie ich mit JS & CSS nen hover-background der einzelnen Zelle <TD> habe NICHT aber von der <Table>!

trotzdem danke ..

cu futuretec

 

[da_loki]

Wenn du dich damit auskennst, kannst du den Code ja auch auf die TABLE adaptieren.

Ist ja nichts anderes

 

[futuretec]

das geht nicht so einfach denn --> "Wenn Hover @ Zelle1 - dann BG-Change bei Tabelle / Wenn Hover @ Zelle2 - dann BG-Change bei Tabelle" etc. - nicht ein einfaches table-hover = bg change -.-

 

[da_loki]

in jedem TD ein onMouseOver="document.getElementById('tabelle').style.background-image = url('bg1.png');" sollte dir da helfen...

 

[futuretec]

vielen dank .. aber leider funktioniert das nicht -->

<table id="menutable">
			<tr>
			<a href="#"><td onMouseOver="document.getElementById('menutable').style.background-image = url('img/menu/tab_home.gif');" id="home"></td></a>
			<a href="#"><td onMouseOver="document.getElementById('menutable').style.background-image = url('img/menu/tab_unternehmen.gif');" id="unternehmen"></td></a>
			<a href="#"><td onMouseOver="document.getElementById('menutable').style.background-image = url('img/menu/tab_angebot.gif');" id="angebot"></td></a>
			<a href="#"><td onMouseOver="document.getElementById('menutable').style.background-image = url('img/menu/tab_produkte.gif');" id="produkte"></td></a>
			<a href="#"><td onMouseOver="document.getElementById('menutable').style.background-image = url('img/menu/tab_referenzen.gif');" id="referenzen"></td></a>
			<a href="#"><td onMouseOver="document.getElementById('menutable').style.background-image = url('img/menu/tab_kontakt.gif');" id="kontakt"></td></a>
			<a href="#"><td onMouseOver="document.getElementById('menutable').style.background-image = url('img/menu/tab_impressum.gif');" id="impressum"></td></a>
			<a href="#"><td onMouseOver="document.getElementById('menutable').style.background-image = url('img/menu/tab_agbs.gif');" id="AGBs"></td></a>
			</tr>
</table>

 

[XraYSoLo]

gewöhn' dir bitte mal an, code-tags zu verwenden, danke.

Nils aka XraYSoLo

 

[futuretec]

das ist nur völlig sinnlos wenn dabei die komplette formatierung verloren geht -.- dann kannst du gleich ohne jeglichen blank, komme o.ä. coden und nen endlosstring posten ..

 

[Fredmonster]

in jedem TD ein onMouseOver="document.getElementById('tabelle').style.background-image = url('bg1.png');" sollte dir da helfen...

falsch.. Mit dieser Bedingung gibt es einen javascript-error.. Javascript versteht das "-", wie ein Rechenzeichen und versucht "image" von "background" abzuziehen.. Richtig müsste der Code so lauten:

onMouseOver="document.getElementById('tabelle').style.backgroundImage = 'url(\'bg1.png\')'"

Gruß, Fredmonster

 

[futuretec]

Thx Fredmonster!

Du hast mir RIESIG damit geholfen ! :-D danke

cu futuretec ;-)