Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2006 Teil von Februar

SELFHTML Forumsarchiv
"einfärben"

Informationsseite
  1. Seite (CSS) "einfärben" von Stefan, 28. 02. 2006, 08:34
nach unten

"einfärben"

Die folgende Nachricht zum Thema stammt von: Stefan, 28. 02. 2006, 08:34

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

nach obennach unten

"einfärben"

Die folgende Nachricht zum Thema stammt von: Griever, 28. 02. 2006, 08:52

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

nach obennach unten

"einfärben"

Die folgende Nachricht zum Thema stammt von: Julian von Mendel, 28. 02. 2006, 08:56

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
--
http://lighttraffic.de | http://derjulian.net

nach obennach unten

"einfärben"

Die folgende Nachricht zum Thema stammt von: Griever, 28. 02. 2006, 08:58

Aso.

Warum ich da net selbst draufgekommen bin ...

nach obennach unten

"einfärben"

Die folgende Nachricht zum Thema stammt von: Cybaer, 28. 02. 2006, 11:51

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

--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!

nach oben
Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2006 Teil von Februar

© 1998-2006 Seite Impressum, Software: Classic Forum