opacity / transparency... DIE Lösung per jQuery plugin?!?

Hallo, wie schon an anderer Stelle gesagt ist es mit meinen Programmierkünsten nicht weit her, aber Transparenzeffekte interessieren mich schon sehr. Aber alles was mit CSS/Png- Lösungen zu tun hat, hat auch immer seine Nachteile. Nach viel Sucherei habe ich das hier gefunden: [url=http://jorenrapini.com/blog/css/transify-a-jquery-plugin-to-easily-apply-transparency-opacity-to-an-elements-background] Da ja Shopware jQuery unterstützt (zwar 1.4.2 und nicht 1.4.3, aber der Verfasser sagt es sollte auch mit älteren Versionen gehen), ist es vielleicht möglich dieses Plugin mit einzubinden, so das man es in Shopware nutzen kann? Ich war nicht faul und habe es selbst versucht, aber siehe oben… Genial wäre es, wenn Jemand das testen würde und hier an einem Beispiel zeigen würde wie es korrekt eingebunden und wie ein Funtionsaufruf (vermutlich über die style.css?) z.B. beim Header, centerbox oder einer Artikelbox) in der Praxis aussieht - zumindest einem Noob wie mir würde das extrem helfen :sunglasses: Grüße rattatui

[quote=„rattatui“]Hallo, wie schon an anderer Stelle gesagt ist es mit meinen Programmierkünsten nicht weit her, aber Transparenzeffekte interessieren mich schon sehr. Aber alles was mit CSS/Png- Lösungen zu tun hat, hat auch immer seine Nachteile. Nach viel Sucherei habe ich das hier gefunden: [url=http://jorenrapini.com/blog/css/transify-a-jquery-plugin-to-easily-apply-transparency-opacity-to-an-elements-background] Da ja Shopware jQuery unterstützt (zwar 1.4.2 und nicht 1.4.3, aber der Verfasser sagt es sollte auch mit älteren Versionen gehen), ist es vielleicht möglich dieses Plugin mit einzubinden, so das man es in Shopware nutzen kann? Ich war nicht faul und habe es selbst versucht, aber siehe oben… Genial wäre es, wenn Jemand das testen würde und hier an einem Beispiel zeigen würde wie es korrekt eingebunden und wie ein Funtionsaufruf (vermutlich über die style.css?) z.B. beim Header, centerbox oder einer Artikelbox) in der Praxis aussieht - zumindest einem Noob wie mir würde das extrem helfen :sunglasses: Grüße rattatui[/quote] Hier geht es um das Hintergrundbild eines Elements, nicht um Bilder in einem „IMG“-Tag. Ist das wirklich das, was Du brauchst? Mit CSS ist das für „IMG“-Bilder (und andere Elemente) aber sehr einfach lösbar: mit „opacity“ bei den guten Browsern, mit „Filter“ beim IE (dem natürlichen Feind jedes Web-Entwicklers). Notfalls auch über PNG-Transparency. Eigentlich kein wirkliches Problem.

[quote]Hier geht es um das Hintergrundbild eines Elements, nicht um Bilder in einem „IMG“-Tag. Ist das wirklich das, was Du brauchst? Mit CSS ist das für „IMG“-Bilder (und andere Elemente) aber sehr einfach lösbar: mit „opacity“ bei den guten Browsern, mit „Filter“ beim IE (dem natürlichen Feind jedes Web-Entwicklers). Notfalls auch über PNG-Transparency. Eigentlich kein wirkliches Problem.[/quote] Hi Avenger, …hm. Also eigentlich geht es mir um das, was Du siehst, wenn Du in der Webseite dort auf „Demo“ drückst Demo Also ein Hintergrund- Bild, auf dem eine halbtransparente Box zu sehen ist. …Wenn ich mir das mit Firebug anschaue, ist das auch genau so, und eigentlich das was ich haben wollte… Und das sind doch, soweit ich das sehe (und verstehe) die Opacity- Effekte, die man sonst nur per per CSS Befehle oder PNG-Transparency erreichen kann und Browserspezifischen Anpassungen (genau wie Du sagst mit dem IE- Hassfaktor) machen muss. Ich dachte eben, das dies eine gute Alternative zu den üblichen Methoden ist… Ausserdem schreibt der Autor ja weiterhin: * Make any element’s background or border transparent without effecting everything inside the element * Quick, easy, small footprint * Works in all browsers * Control over opacity * Works with background colors, background images, and borders (if you want to use CSS3 border-radius, you’ll need to apply your own CSS values to the div that is created, it has a class of ‘transify’) * Easily make background animate opacity on hover * Verified with jQuery 1.4.3, but should work fine with older versions …das klingt ja nicht ganz unvorteilhaft, da sich offenbar auch andere Erleichterungen ergeben. Was mich betrifft - ich kann das ja keinesfalls so gut wie Du, und mir fehlt die Zeit, ich kann aber trotzdem diese ganze Thematik nicht einfach links liegen lassen (davon abgesehen ist das alles aber auch sehr interessant). Kann man das erstmal alles so gut, ist das sicher kein Ding, hast du Recht… Wenn ich mich was den Sinn dieses jQuery`s total geirrt haben sollte, nehme ich alles zurück und Behaupte ab jetzt das Gegenteil :wink: Oder ich habe mich im ersten Beitrag ungeschickt ausgedrückt - Ja, eben ein Hintergrundbild, und gewisse Seitenelemte, die darüber liegen, sollten mit Transparenzen versehen sein… Und eben eine Alternative zu den üblichen „Verrenkungen“ a la IE. Grüße rattatui

[quote=“rattatui”]Hi Avenger, …hm. Also eigentlich geht es mir um das, was Du siehst, wenn Du in der Webseite dort auf “Demo” drückst [/quote] element.style { background-color: #FFFFFF; background-image: none; background-repeat: repeat; border: 4px solid #999999; height: 400px; left: 0; opacity: 0.6; position: absolute; top: 0; width: 400px; z-index: -1; } Das Prog mach eigentlich nix anderes als was Du auch mit CSS direkt machen kannst… Wichtig hier eigentlich nur “opacity: 0.6;”, alles andere ist Beiwerk… Um auch den IE zu überreden, das zu tun, noch -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // IE8 filter: alpha(opacity=60); // IE 5-7 Da brauchst Du kein jQuery_Plugin für zu… Ich schätze mal, dass damit nur die browserspezifischen Unterschiede berücksichtigt werden. Mit PNG-Transparancy hat eigentlich nur der IE6 Probleme, und den unterstützen wir schon seit 2 Jahren nicht mehr in unseren Shop-Templates… Also alle im grünen Bereich. Den IE sollte man wirklich verbieten… Selbst der IE 9 wird solch schöne CSS3-Funktionen wie “text-shadow” nicht unterstützen, was sonst alle aktuellen Browser tun… Was Microsoft das treibt ist eine Frechheit.

Hi avenger, …danke schon mal für Deine Geduld mit mir. …also ich geb mir echt Mühe :wtf: bitte schau nochmal. Ich hab jetzt mal folgendes mit dem Header probiert (lachen erlaubt, das hebt die Montags- Stimmung): - im Template ein Hitergrundbild eingefügt. Dann habe ich in meiner abgeleiteten .css einfach mal den opacity Wert mit 0.6 eingetragen - das funktioniert auch, sieht aber total beknackt aus weil ja dann alles (Logo, Warenkorb…) semitransparent wird und die Schrift merkwürdig dargestellt wird (wie ich ja vorher schon in diversen Foren auch gelesen hatte - nur jetzt für mich das erste mal praktisch nachvollzogen). Browser ist der FF 3.6. Um das zu verhindern, dachte ich mir ich mache einfach einen zweiten Header, der nur als Dummy die Color- und Opacity- Eigenschaften trägt. Der sollte dann “hinter” dem eigentlichen Header liegen. Dazu habe ich in der index.tpl ein leeres div “header_1” angelegt (mein erstes “div” überhaupt :oops: ) im Listing hier ganz unten zu sehen: [code]

{* Shop header *} {block name=‘frontend_index_navigation’}
{* Language and Currency bar *} {block name=‘frontend_index_actions’} {include file=‘frontend/index/actions.tpl’} {/block} {* Shop logo *} {block name=‘frontend_index_logo’}
[{$sShopname}]({url controller=‘index’} “{$sShopname} - {s name=‘IndexLinkDefault’}{/s}”)
{/block} {* Shop navigation *} {block name=‘frontend_index_checkout_actions’} {include file=‘frontend/index/checkout_actions.tpl’} {/block} {block name=‘frontend_index_navigation_inline’}{/block}
{/block}

[/code] …Dann habe ich in meiner .css diesen header_1 eingefügt und dem “richtigen” Header Transparenz gegeben (fürs erste hier einfach dem container_20), damit die opacity des Dummys gesehen werden kann. Die Reihenfolge brachte dann der z-index… /\* HEADER ------------------------ \*/ #header {height:135px;position: relative; width: 100%; background-color: transparent;} #header #logo a {background: url(../images/logo.jpg) style=float:left; no-repeat;width: 148px;height: 44px;text-indent: -9999px;display: inline-block;margin: 38px 0 0 38px;} /\* HEADER\_1 Opacity ------------------------ \*/ div#header\_1 {z-index: -1;height:135px;position: absolute;top: 113px;right: 331px; width: 1000px;} #header\_1 {background-color: #fff; opacity: 0.6;} …Das funktioniert auch, und ich sehe jetzt alles so wie ich es haben wollte: Das Hintergrundbild schimmert durch die teilweise Transparenz hindurch und Schrift, Logo usw. sind normal dargestellt. Nur musste ich den header_1 absolut positionieren (top:113px musste ich machen weil ich vorher schon den ganzen container_20 nach unten geschoben hatte). Sag mal ist das jetzt total falsch? Oder zumindest die richtige Richtung? Ich hab wahrscheinlich noch andere Fehler da drin, die mir garnicht klar sind - kannst Du mir dazu noch was sagen? Beim Chrome Browser scheint scheint die horizontale Positionierung des Dummys nicht zu passen, beim FF 3.6.13 schon - was kann ich da machen? Grüße rattatui PS: Die “Eigenheiten” des IE zeigen deutlich die Arroganz von MS, denn doof sind die nicht. Die verlassen sich dabei einfach auf ihre Marktführerschaft nach dem Motto “Ihr macht das so, wie wir es wollen weil wir die Größten sind” - eine absolut unsympathische und auch unproduktive Einstellung. Gut zu wissen, das Ihr den IE6 auch nicht mehr unterstützt. Ein Problem weniger…

Hallo, ich habe den beschriebenen horizontalen Versatz im Chrome Browser nun nicht mehr festststellen können (lag wohl an mir oder meinem PC) - es funktioniert mit Chrome 8, Chrome 4, FF 3.6, FF 2.0, Opera 9.5 und 11. Sicher auch mit dem IE wenn ich wie von Avenger beschrieben die entsprechenden Anpassungen hinbekommen sollte. …Aber mir würde es sehr weiterhelfen, wenn mir Jemand sagen würde ob das ein gangbarer Weg ist, den ich da beschrieben habe - ich kann zwar sehen, dass es funktioniert, aber weitere, möglicherweise negative Folgen kann ich aufgrund meines geringen Wissens einfach nicht abschätzen… Grüße rattatui