[Typo3-UG NRW] PNGs in dynamischen Menüs

[Carla Froitzheim]

19m0nyq02 at sneakemail.com wrote:

>Hi Paul,
>am Montag, 15. November 2004 schriebst du zum Thema "Re: [Typo3-UG NRW] PNGs in dynamisc":
>
>  
>
>>Ja, diese Notlösung habe ich bereits eingebaut aber ich bin damit
>>nicht wirklich glücklich ;).
>>
>>Dass man JS ausschalten sollte bei einem Browser wie IE ist völlig
>>richtig, wird aber von kaum einem getan (immerhin 93% haben es an laut
>>webhits).
>>
>>Vielleicht weiss ja jemand doch eine Lösung wie man in RollOvers
>>verwendete PNGs dem IE aufzwingen kann ;).
>>    
>>
>
>ich hab mal etwas gegooglet und bin auf folgende Seite gestossen:
>http://www.alistapart.com/articles/pngopacity/
>
>da geht es auch um eine script-lösung. aber genaugenommen wird das 
>script nur benutzt um die Browser zu unterscheiden und den Browsern 
>unterscheidliches HTML vorzuwerfen. Das könnte ja PHP/typo3 für dich 
>machen. Und dann bindest du unterschiedliche Styles ein:
>für IE:
><div id="myDiv" 
>     style="position:relative; height:250px; width:250px;
>      
>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage
>.png',sizingMethod='scale');"></div>
>
>und sonst:
><div id="myDiv" 
>     style="position:relative; height:250px; width:250px;
>background-image:url(myimage.png);"></div>
>
>Das müßte natürlich genausogut in ein externes CSS verlegt werden 
>können.
>Und im Style kann man natürlich auch noch Pseudoformate benutzen um 
>einen Rollovereffekt zu erzeugen:
>a:link  .m1	{ background-image:url(menu1.png); }
>a:hover .m1	{ background-image:url(menu1o.png); }
>
>a:link .m2	{ 
>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='menu1.p
>ng',sizingMethod='scale'); }
>a:link .m2	{ 
>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='menu1o.
>png',sizingMethod='scale'); }
>
>kombiniert mit der Browsererkennugn von typo3 und der Weiche im 
>Template sollte damit doch etwas zu machen sein, das kein Script 
>benötigt.
>
>  
>
Wenn man schon mit externem CSS an die Sache herangeht, kann man sich 
ggf. auch die Eigenschaften

filter:alpha(opacity=80)      <-- für IE
-moz-opacity:0.8               <-- für die Geckos > NN 4.x

zunutze machen. (80 bzw. 0.8 steht für die Deckkraft.) Benötigt auch 
kein Script, funzt aber nicht in Opera.

Vielleicht bekommt man ja auch einer geschickten Kombination aus allem 
für jeden Browser etwas nettes hin?

Gruss
Carla