In einer HTML Tabelle vorhandenes Bild bei MouseOver ersetzen

[Marc]

Hallo,

@@Marc:

nuqneH

Mach doch einfach eine CSS-Tabelle!

Würdest du auch erklären, was du damit meinst? 'display: table…'.

Ja, aber Du weißt das doch. Wenn Bernd gefragt hätte, hätte ich es ihm auch erklärt.

Natürlich dazu noch mindestens display: table-cell, besser natürlich noch display: table-row um die Elemente, die sich wie Tabellen-Zellen verhalten sollen. Dafür würde ich aber kein zusätzliches Element wie DIV einfügen, es sei denn, die "Tabelle" soll mehrere Zeilen haben.

Nimm ein teiltransparentes gif, dann brauchst Du nur noch background-color in Deinem CSS...

Für die Art von Bild ist aber JPEG das richtige Format, da gibt es keine Transparenz.

Ich nehme gerne PNGs, gif ist natürlich Quatsch mit Soße...

Aber so geht’s: Das Bild (JPEG, nur das Innere ohne schwarzen/roten Rahmen und Schatten) wird mit 'border-radius' rund gemacht.

border-radius: 50% 50%;

Der Schatten (transparentes PNG-24, sonst Farbsäume) ist Hintergrundbild des Containers ('th'), schwarz bzw. rot dessen Hintergrundfarbe, bei ':hover' muss man lediglich diese umschalten.

Unter Umständen geht das (in modernen Browsern) auch mit radial gradients, habe ich aber noch nicht ausprobiert.

Wie immer gibt es mehrere Wege, oft sogar gleichwertig, manchmal passt die eine oder andere Vorgehensweise besser ins Gesamtkonzept - oder zur eigenen Arbeitsweise/Gewohnheit.

Viele Grüße,
Marc.