Transparenz von Bildern bei onmouseover und -out

[Tubo]

Hallo Leute,
ich habe ein Bild als Link welches auch mit Hilfe des Styles transparent sein soll. Zuweit so gut. Hier der Code dazu:

<a href="../kfc_configs.html"><img src="../bilder/kfclogo.jpg" onMouseover="this.src='../bilder/kfclogo.jpg'" onMouseout="this.src='../bilder/kfclogo.jpg'" width=129 height=131 border=no alt="KFC Game Configs" style="filter:alpha(opacity=35); -moz-opacity: 0.3"></a>

Das Problem ist, dass das Bild zu Anfang transparent, bei onmouseover aber NICHT transparent (also das Orginalbild), und bei onmouseout wieder transparent sein soll! Bisher macht er aber alle Bilder transparent, wahrscheinlich weil das style element sich auch auf die Bilder bei onmouseover und onmouseout bezieht.
Kann mir jemand helfen, bitte?!
Thx,
Tubo

[Jeena Paradies]

Hallo ,

Zuweit so gut.

Wie bitte? Verstehe ich nicht.

<a href="../kfc_configs.html"><img src="../bilder/kfclogo.jpg" onMouseover="this.src='../bilder/kfclogo.jpg'" onMouseout="this.src='../bilder/kfclogo.jpg'" width=129 height=131 border=no alt="KFC Game Configs" style="filter:alpha(opacity=35); -moz-opacity: 0.3"></a>

Äm was du hier machst ist:
du sagst bei onMouseover _und_ bei onMouseour soll der Browser das Bild ../bilder/kfclogo.jpg anzeigen. Im style sagst du dann auch noch dazu, dass er es transparent machen soll, aber immer.

Besser wäre es ohne JavaScript und nur mit CSS zu arbeiten.

Folgendes: Transparenz gibt es ja eigentlich nicht innerhalb von CSS, deshalb solltest du eher mit halbtransparenten png Bildern arbeiten. Und zwar könntest du sie als Hintergrundbilder hintun. Da kannst du noch mit den pseudoformaten http://selfhtml.teamone.de/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus rbeiten. Mit :hover kannst du dann ein anderes Bild als Hintergrund deffinieren. Und schon funktioniert es sogar bei abgeschaltetem JS und in allen möglichen Browsern (nicht im NS4)

Für den IE musst du dann aber trotzdem noch dieses Filter dazunehmen, und zwar auch nur bei :hoover.

Wenn du noch Fragen hast melde dich noch einmal.

Grüße
Jeena Paradies

[Tubo]

Hallo,
Vielen Dank für die Antwort

Zuweit so gut.
Wie bitte? Verstehe ich nicht.

Soweit so gut meinte ich :)

Dein Vorschlag mit :hover funktioniert in meinem Fall glaube ich nicht, oder du musst es mir noch verständlicher erklären.
Hier die Seite meines Problems: http://www.tubo.privat.t-online.de/shizmoo_configs.html

Noch mal der Erklärungsversuch: Z.b. beim Kung Fu Chess Logo soll das durchscheinende Bild zu Anfang vorhanden sein, dann bei Onmouseover durch das Orginalbild (http://www.tubo.privat.t-online.de/bilder/kfclogo.jpg) ersetzt werden und bei onmouseout wieder durchscheinend sein. Kann man das "reparieren"?
Das wäre sehr nett.
Oder stell mir deine Methode nochmal genauer vor bitte.
Vielen Dank
Grüße,
Tobias

[Jeena Paradies]

Hallo ,

Dein Vorschlag mit :hover funktioniert in meinem Fall glaube ich nicht, oder du musst es mir noch verständlicher erklären.
Hier die Seite meines Problems: http://www.tubo.privat.t-online.de/shizmoo_configs.html

Also ich hätte es so gemacht:

• 2 png Bilder, das erste davon durchsichtig
• da es ja sowieso Links sind kommt sogar der IE damit zurecht
• dann hätte ich in einer externen CSS Datei diesen Link mit width und height definiert
• display: block nicht vergessen, da ja inline Elemente keine Höhe haben dürfen
• bei :link hätte ich das 1. Bild als Hintergrund gelegt
• bei :hover das zweite (da aber der IE keine halbtransparenten pngs darstellen kann filter:alpha(opacity=35); in den Bereich von :hover
• jetzt ist das Problem, dass man ja was zum Anklicken braucht
• ein durchsichtiges 1px-gif mit alt="Kung Fu Chess"

Theoretisch müsste das funktionieren. Oder hat jemand eine bessere Idee? Was man natürlich machen kann, dieses filter:alpha(opacity=35); in eine extra Datei packen (screenie.css) und dann per

<!--[if gte IE 5]>
     <link href="screenie.css" rel="stylesheet" type="text/css">
<![endif]-->

nachladen. Somit bleibt die richtige CSS Datei valide.

Grüße
Jeena Paradies

[Tubo]

Hi,
danke für den Vorchlag,
aber ich habs jetzt so gelöst:
http://www.tubo.privat.t-online.de/shizmoo_configs.html
Bye,
Tubo

[Jeena Paradies]

Hallo ,

aber ich habs jetzt so gelöst:
http://www.tubo.privat.t-online.de/shizmoo_configs.html

Also bei mir verändert sich beim besten willen überhaupt nichts. Ich habe sogar JavaScript für dich angeschmissen, dennoch nichts.
(Opera 7.20 B7 /Linux)

Grüße
Jeena Paradies

[Tubo]

Also bei mir verändert sich beim besten willen überhaupt nichts. Ich habe sogar JavaScript für dich angeschmissen, dennoch nichts.
(Opera 7.20 B7 /Linux)

Hi,
hm, danke für die Mitteilung. Stimmt aber, dass es bei Opera nicht funktioniert, wenigstens aber bei IE und Mozilla.

[Tubo]

Ich habe jetzt gelesen, dass Opera keine Tranzparenz unterstützt!

[Jeena Paradies]

Hallo ,

Ich habe jetzt gelesen, dass Opera keine Tranzparenz unterstützt!

Es unterstützt transparente _und_ halbtransparente png Bilder.
Was du einsetzt sind extra nur für die Browser hergestellten Extrawürste. Es geht nur bei zwei Browsern, denn du hast ja auch nur zwei verschiedene Sachen benutzt. Also das filter: und -moz Ding. Beide gehören zu _keinem_ Standard, und laufen deshalb nur auf diesen Browsern. Wenn du dein css validieren lassen würdest, würde es dir der Validator auch bestätigen.

Warum willst du alle anderen Browser davon ausschließen? Weißt du wie viele ander Browser es gibt?

Grüße
Jeena Paradies