Hallo ihr!
Ich wünsche euch ein frohes neues Jahr!

Jetzt habe ich eine kleine Frage..:

Ich habe eine Tabelle mit Bildern drin, z.b. so:

Code

<table> 
<tr><td><img/></td><td><img/></td></tr> 
<tr><td><img/></td><td><img/></td></tr> 
</table> 

Jetzt möchte ich, das wenn man mit der Maus über eine Zelle fährt, sich das Bild drin verdunkelt. Ich hab da so ein halbtransparentes "gif"-Bild vorbereitet, das man da ev. vorlegen kann.
Ich habe nach erklärungen gesucht, gefunden habe ich aber nur Anleitungen, wie man Bilder austauscht.. Aber da meine Tabelle ist dynamisch und ich kann nicht alle Bilder im Vorraus definieren.

Ev. müsste ich das Bild in den Hintergrund legen, also

Code

<td background="bild.jpg" 

oder so?

Ich hoffe, ihr versteht, was ich meine und jemand kann mir helfen.

Freundliche Grüsse
Alain

--edit--
Ich bin gegen das "austauschen" der Bilder, weil ich sonst ja für jedes Bild in der Tabelle noch ein 2. haben müsste, ein Dunkleres..

http://bitesizestandards.com/...browser-transparency

Hallo Mordok,

lies mal hier nach:
http://www.drweb.de/...albtransparenz.shtml

Das zweite Bild, die "Gardine" (eins reicht) erstellst Du in einem Bildbearbeitungsprogramm.

Gruß Sabine

Guten Tag

Danke ganesh, hab das kurz ausprobiert, wäre geeignet für meine Tabelle. Jetzt müsste ich das nur noch mit einem Mousover verbinden können..
Im head-Bereich steht jetzt:

Code

#transp { 
	background: black; 
	opacity: 0.6; 
	-moz-opacity: 0.6; 
	filter: alpha(opacity=60); 
} 

und dann in der Tabelle:

Code

<table> 
	<tr><td id="transp"><img src="bild.jpg"></td></tr> 
</table> 

Das Bild in der Zelle wird jetzt etwas "verschleiert". Das soll es jedoch nur, wenn die Maus über der entsprechenden Zelle ist.

@SabineP
Danke für den Link, aber es war leider nicht das, was ich brauchte, denn ein solches, halb-transparentes Bild hatte ich doch schon.

Hat jemand eine Idee für das Mouseover?

Freundliche Grüsse
Alain

Hallo Alain

Da musst Du das Bild verlinken. Dann kannst Du z.B. angeben

Code

a.bild {} 
a.bild:hover {background: black; opacity: 0.6; -moz-opacity: 0.6; filter: alpha(opacity=60);} 

Gruss
Martin

Ok die Idee von Martin funktioniert wunderbar. Allerdings nur mit Opera und Mozilla.. Der Internetexplorer kapiert das irgendwie nicht so ganz.. Hier nochmal, was ich bis jetzt habe:
Das steht im CSS-File

Code

a.bild {}  
a.bild:hover { 
	background:black; opacity: 0.4; -moz-opacity:0.4; filter:alpha(opacity=40); 
} 

Und das ist die Tabelle

Code

<table> 
	<tr> 
		<td><a class="bild" href="detail.html"><img src="bild.jpg"></a></td> 
	</tr> 
</table> 

Weiss jemand, weshalb der Internetexplorer die Sache nicht korrekt anzeigen kann?

Gruss
Alain

Hallo Alain

Sorry, habs vergessen, der IE braucht noch eine Breitenangabe, sonst kann ers nicht darstellen.
Bei "a.bild:hover" schreibst Du noch "width: 100%" rein und dann sollte es auch im IE klappen ...

Gruss
Martin

Ok vielen Dank Martin!
Das ganze funktioniert jetzt vorzüglich.

Gruss Alain