"einfärben"

[Stefan]

Hallo,

gibt es eine Möglichkeit per CSS eine Farbe mit zB halber Deckkraft über ein Hintergrundbild zu legen?

Ich habe ein td Element in dem folgende style Angabe ist: style="background-image:url(../bilder/hintergund_schwarz.jpg)" Nun möchte ich, daß wenn ich mit der Maus über dieses td Element fahre das Bild nicht verschwindet, sondern zB heller wird. Und das wäre wohl am einfachsten wenn ich weiß mit 50% drüber lege. Habe aber dazu nix gefunden.

Falls es geht bewerkstellige ich das mousover dann am besten mit Javascript, oder?

Danke
Stefan

[Griever]

Da stellst du in der Tabelle ein transparentes gif mit exakt der selben größe direkt darunter.

z. B.

<table>
<tr>
<td><img src="bild.jpg" width=50 height=50></td>
</tr>
</table>
<table>
<tr>
<td><img src="transparent.gif" width=50 height=50>
</tr>
</table>

Dieses setzt du nun mit CSS (position:relative) um soviel hoch, dass es direkt darüber liegt.

Nun benötigst du noch folgende Angaben:

table.dastransparentegif {
 filter:alpha(opacity=50);
 display:none;
}

Mit der JS-Funktion (Auf dem eigentlichen Bild) rufst du jetzt auf, wenn der User mit der Maus drüberfährt:

document.getElementById("dietransparentegrafik").style.display=inline

Mit der JS-Funktion (Auf der transparenten Grafik) rufst du jetzt auf, dass dieses beim herausfahren der Maus wieder sichtbar wird. (sonst würde es flackern!)

Wenn jemand eine bessere Idee hat, ist es auch gut, da der Alpha-Filter nur unter Microsoft IE funktioniert.

MFG
Griever

[Julian von Mendel]

Hi,

Wenn jemand eine bessere Idee hat, ist es auch gut, da der Alpha-Filter nur unter Microsoft IE funktioniert.

ja. Verwende ein PNG mit Alpha-Kanal und entsprechendem Workaround für IE. Dann gehts in allen modernen Browsern.

Schöne Grüße
Julian

[Griever]

Aso.

Warum ich da net selbst draufgekommen bin ...

[Cybaer]

Hi,

Wenn jemand eine bessere Idee hat, ist es auch gut, da der Alpha-Filter nur unter Microsoft IE funktioniert.

Moderne Browser unterstützen ebenfalls CSS-Teiltransparenz:

opacity (CSS 3 - neuere Mozilas, Konquerors/Safaris & der allerneueste Opera), bzw. die propietären Eigenschaften -moz-opacity (ältere Mozillas) und -khtml-opacity (ältere Konquerors/Safaris).

Man kann alles gleichzeitig verwenden - inkl. filter:alpha.

Gruß, Cybaer