Skala bilder generade med PNGBehavior.htc

De senaste veckorna har jag blivit utsatt för frustration. I en rad projekt jag varit involverad i har behov av trevliga skuggningar av blockelement funnits. Det problemet är optimalt för PNG, med dess trevliga alphakanal.

IE/Win upp till version 6 har inte stöd för alphakanalen. Detta är en välkänd bugg, och har varit en ilsken finne i röven på alla utvecklare i åratal. För att kringgå problemet finns sedan ett par år tillbaka det välkända scriptet pngbehavior.htc som utnyttjar det IE-specifika CSS-attributet behaviour för att använda AlphaImageLoader (också IE-specifikt) för att skapa ett substitut till PNG-stöd. Scriptet finns i en rad olika utföranden, och det jag använt i jobbet Erik Arvidssons variant av scriptet. Detta script fungerar precis som alla andra varianter jag sett enbart på bildelement.

Det som skapade frustration var det faktum att jag inte kunde skala bilder genererade av pngbehaviour.htc.

Scenariot: elementet (boxen) som skall skuggas har dimensionen 400*500 pixlar. Den skall ha en skugga undertill. För detta har jag en PNG-bild med en toning från svart till transparant med dimensionen 20*20 pixlar. Den skalas på bredden och positioneras direkt under boxen.

Med pngbehaviour.htc förblev skuggbilden 20*20 pixlar.

Första gången jag stötte på det tog det två timmar att dra ovanstående slutsats. Andra gången fick jag nog och gick till dokumentationen för AlphaImageLoader för att se om jag kunde göra något åt det. Jag hittade där följande mattnyttiga information:

Attribut och egenskaper för AlphaImageLoader

Attribute

Property

Description

enabled

Enabled

Sets or retrieves a value that indicates whether the filter is enabled.

sizingMethod

sizingMethod

Sets or retrieves the manner in which to display an image within the boundary of the object that the AlphaImageLoader filter is applied to.

src

src

Sets or retrieves the URL of an image that the AlphaImageLoader filter loads.

sizingMethod låter som något jag är ute efter. Dokumentationen för sizingMethod säger att följande egenskaper är godtagbara:

crop : Clips the image to fit the dimensions of the object.

image : Default. Enlarges or reduces the border of the object to fit the dimensions of the image.

scale : Stretches or shrinks the image to fill the borders of the object.

Jag såg här ett ljus i tunneln. Jag öppnade upp min pngbehavior.htc och gick till raden som deklarerade AlphaImageLoader och konstaterade att sizingMethod inte var angiven. Enligt ovanstående återgår scriptet alltså till image, defaultvärdet. Jag utökade därför mitt kontruktor till detta:

1. // set filter
2. element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
3. "AlphaImageLoader(src='" + src + "', sizingMethod='scale')";

Det var inget tåg: scriptet skalade nu mina PNG-bilder istället för att reduvera dem till standardstorlek.

Jag tyckte det var värt att nämna utifall fler hamnar i samma sits. Hoppas jag hjälpte någon. Om pngbehavior.htc används i något projekt kan det vara en idé att försäkra sig att sizingMethod='scale' finns med i koden.

Uppdatering: Jag blev litet nyfiken på ämnet, och en stunds googlande och litet knackande resulterade i ett minimalt testcase för en alternativ lösning som inte kräver img-element. Koden där kommer bli ett ny favoritsnutt vad gäller webbutveckling för min del.