<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>PNG Behavior (WebFX)</title>
<!--
<script type="text/javascript" src="../../webfxlayout.js"></script>
-->
<script type="text/javascript" src="webfxlayout.local.js"></script>
<style type="text/css">
</style>
</head>
<body>
<!-- WebFX Layout Include -->
<script type="text/javascript">
var articleMenu= new WebFXMenu;
articleMenu.left = 384;
articleMenu.top = 86;
articleMenu.width = 140;
articleMenu.add(new WebFXMenuItem("PNG Behavior", "pngbehavior.html"));
articleMenu.add(new WebFXMenuItem("Demo", "demo.html"));
articleMenu.add(new WebFXMenuSeparator);
articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/pngbehavior102.zip"));
webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));
webfxLayout.writeTitle("PNG Behavior");
webfxLayout.writeMenu();
webfxLayout.writeDesignedByEdger();
</script>
<div class="webfx-main-body">
<!-- end WebFX Layout Includes -->
<h2>Introduction</h2>
<p>This behavior adds support for the most powerful raster graphic format available to Internet Explorer.
It is of course our all beloved PNG format I am talking about. This format can have an 8 bit alpha channel
which allows the images to be semi transparent. Transparency allows images to have antialiased edges and
this makes the images look more professional.</p>
<h2>Implementation</h2>
<p>The secret behind this implementation is a filter introduced in IE55 that is called AlphaImageLoader. This
filter takes an image with alpha channels and displays it. It has also a property for deciding how to scale the
image.</p>
<pre>
<img src="blank.gif" style="width: 100px; height: 100px; filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')" />
</pre>
<p>See
<a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/AlphaImageLoader.asp">MSDN</a>
for a complete reference.</p>
<p>Notice that the true source is put in the <code>src</code> property of the filter and a blank image is
used as the <code>src</code> attribute for the image. Another thing to notice is that the size should be
set so that the filter will be applied. Another reason to set the size is to force the image to take the
size of the real image and not of the blank image.</p>
<h3>Behavior</h3>
<p>Now we need to create the behavior that handles all this behind the scenes. What we need to do is
to check the <code>src</code> and if it is a PNG image we add the filter and change the <code>src</code>
of the image to a blank image. To find when the <code>src</code> changes we listen to the
<code>onpropertychange</code> event. If the <code>src</code> is not an PNG image we remove the filter.
To make it easier we modify the <code>runtimeStyle</code> object instead of the <code>style</code> object.
The <code>runtimeStyle</code> object can be thought of as an extra style cascade layer that takes precedence
over the normal style declarations. When setting the <code>runtimeStyle</code> the old values are still
stored at the <code>style</code> object so once the <code>runtimeStyle</code> is reset the old style values
will be applied as normal.</p>
<p>Below is the complete source for the behavior. Notice that the behavior will only do anything if
the user is using IE55+ on a Win32 platform.</p>
<pre>
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";
if (supported) fixImage();
function propertyChanged() {
if (!supported) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if ( ! new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc) {
element.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
</script>
</public:component>
</pre>
<h2>Usage</h2>
<p>The usage is really simple. All you need to do is to add the png behavior to the image element.</p>
<pre>
<style type="text/css">
img {
behavior: url("pngbehavior.htc");
}
</style>
</pre>
<h2>Remarks</h2>
<p>Notice that the behavior uses an image named "blank.gif". This image should be placed in the same directory
as the web page using the behavior or otherwise you will have to modify the behavior file.</p>
<p>You should not apply other visual filters to the iamge with the PNG behavior because these other filters do
not respect the alpha channels and the result will most likely not be satisfactory.</p>
<p>
<a href="pngbehavior.html">PNG Behavior</a><br />
<a href="demo.html">Demo</a><br />
<a href="http://webfx.eae.net/download/pngbehavior102.zip">Download</a>
</p>
<p class="author">Author: Erik Arvidsson</p>
<!-- end webfx-main-body -->
</div>
</body>
</html>
经典JS封装代码(14)
需积分: 11 29 浏览量
2008-01-07
16:46:33
上传
评论
收藏 75KB RAR 举报
1048356_14.rar （10个子文件） 
14 pngbehavior 
title-background.png 1KB
webfxlayout.local.js 4KB pngbehavior.htc 2KB webfxlayout.local.css 5KB
blank.gif 49B xheart.png 4KB webfx.png 64KB
demo.html 871B find.small.png 390B pngbehavior.html 5KB资源评论
zhangyaowenloveqq
- 粉丝: 0
- 资源: 17
