1 | <public:component>
|
---|
2 | <script type="text/javascript">
|
---|
3 |
|
---|
4 | // IE5.5+ PNG Alpha Fix v2.0 Alpha
|
---|
5 | // (c) 2004-2008 Angus Turnbull http://www.twinhelix.com
|
---|
6 |
|
---|
7 | // This is licensed under the GNU LGPL, version 2.1 or later.
|
---|
8 | // For details, see: http://creativecommons.org/licenses/LGPL/2.1/
|
---|
9 |
|
---|
10 | var IEPNGFix = window.IEPNGFix || {};
|
---|
11 | IEPNGFix.data = IEPNGFix.data || {};
|
---|
12 |
|
---|
13 |
|
---|
14 | // This must be a path to a blank image, relative to the HTML document(s).
|
---|
15 | // In production use I suggest '/images/blank.gif' or similar. That's all!
|
---|
16 | IEPNGFix.blankImg = blankimgpath;
|
---|
17 |
|
---|
18 |
|
---|
19 | IEPNGFix.fix = function(elm, src, t) {
|
---|
20 | // Applies an image 'src' to an element 'elm' using the DirectX filter.
|
---|
21 | // If 'src' is null, filter is disabled.
|
---|
22 | // Disables the 'hook' to prevent infinite recursion on setting BG/src.
|
---|
23 | // 't' = type, where background tile = 0, background = 1, IMG SRC = 2.
|
---|
24 |
|
---|
25 | var h = this.hook.enabled;
|
---|
26 | this.hook.enabled = 0;
|
---|
27 |
|
---|
28 | var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
|
---|
29 | src = (src || '').replace(/\(/g, '%28').replace(/\)/g, '%29');
|
---|
30 |
|
---|
31 | if (
|
---|
32 | src && !(/IMG|INPUT/.test(elm.nodeName) && (t != 2)) &&
|
---|
33 | elm.currentStyle.width == 'auto' && elm.currentStyle.height == 'auto'
|
---|
34 | ) {
|
---|
35 | elm.style.width = elm.offsetWidth + 'px';
|
---|
36 | elm.style.height = elm.clientHeight + 'px';
|
---|
37 | if (elm.currentStyle.display == 'inline') {
|
---|
38 | elm.style.display = 'inline-block';
|
---|
39 | }
|
---|
40 | }
|
---|
41 |
|
---|
42 | if (t == 1) {
|
---|
43 | elm.style.backgroundImage = 'url("' + this.blankImg + '")';
|
---|
44 | }
|
---|
45 | if (t == 2) {
|
---|
46 | elm.src = this.blankImg;
|
---|
47 | }
|
---|
48 |
|
---|
49 | if (elm.filters[f]) {
|
---|
50 | elm.filters[f].enabled = src ? true : false;
|
---|
51 | if (src) {
|
---|
52 | elm.filters[f].src = src;
|
---|
53 | }
|
---|
54 | } else if (src) {
|
---|
55 | elm.style.filter = 'progid:' + f + '(src="' + src +
|
---|
56 | '",sizingMethod="' + (t == 2 ? 'scale' : 'crop') + '")';
|
---|
57 | }
|
---|
58 |
|
---|
59 | this.hook.enabled = h;
|
---|
60 | };
|
---|
61 |
|
---|
62 |
|
---|
63 | IEPNGFix.process = function(elm, init) {
|
---|
64 | // Checks the onpropertychange event (on first 'init' run, a fake event)
|
---|
65 | // and calls the filter-applying-functions.
|
---|
66 |
|
---|
67 | if (
|
---|
68 | !/MSIE (5\.5|6)/.test(navigator.userAgent) ||
|
---|
69 | typeof elm.filters == 'unknown'
|
---|
70 | ) {
|
---|
71 | return;
|
---|
72 | }
|
---|
73 | if (!this.data[elm.uniqueID]) {
|
---|
74 | this.data[elm.uniqueID] = {
|
---|
75 | className: ''
|
---|
76 | };
|
---|
77 | }
|
---|
78 | var data = this.data[elm.uniqueID],
|
---|
79 | evt = init ? { propertyName: 'src,backgroundImage' } : event,
|
---|
80 | isSrc = /src/.test(evt.propertyName),
|
---|
81 | isBg = /backgroundImage/.test(evt.propertyName),
|
---|
82 | isPos = /width|height|background(Pos|Rep)/.test(evt.propertyName),
|
---|
83 | isClass = !init && ((elm.className != data.className) &&
|
---|
84 | (elm.className || data.className));
|
---|
85 | if (!(isSrc || isBg || isPos || isClass)) {
|
---|
86 | return;
|
---|
87 | }
|
---|
88 | data.className = elm.className;
|
---|
89 | var blank = this.blankImg.match(/([^\/]+)$/)[1],
|
---|
90 | eS = elm.style,
|
---|
91 | eCS = elm.currentStyle;
|
---|
92 |
|
---|
93 | // Required for Whatever:hover - erase set BG if className changes.
|
---|
94 | if (
|
---|
95 | isClass && (eS.backgroundImage.indexOf('url(') == -1 ||
|
---|
96 | eS.backgroundImage.indexOf(blank) > -1)
|
---|
97 | ) {
|
---|
98 | return setTimeout(function() {
|
---|
99 | eS.backgroundImage = '';
|
---|
100 | }, 0);
|
---|
101 | }
|
---|
102 |
|
---|
103 | // Foregrounds.
|
---|
104 | if (isSrc && elm.src && { IMG: 1, INPUT: 1 }[elm.nodeName]) {
|
---|
105 | if ((/\.png/i).test(elm.src)) {
|
---|
106 | this.fix(elm, elm.src, 2);
|
---|
107 | } else if (elm.src.indexOf(blank) == -1) {
|
---|
108 | this.fix(elm, '');
|
---|
109 | }
|
---|
110 | }
|
---|
111 |
|
---|
112 | // Backgrounds.
|
---|
113 | var bgSrc = eCS.backgroundImage || eS.backgroundImage;
|
---|
114 | if ((bgSrc + elm.src).indexOf(blank) == -1) {
|
---|
115 | var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);
|
---|
116 | if (bgPNG) {
|
---|
117 | if (this.tileBG && !{ IMG: 1, INPUT: 1 }[elm.nodeName]) {
|
---|
118 | this.tileBG(elm, bgPNG[1]);
|
---|
119 | this.fix(elm, '', 1);
|
---|
120 | } else {
|
---|
121 | if (data.tiles && data.tiles.src) {
|
---|
122 | this.tileBG(elm, '');
|
---|
123 | }
|
---|
124 | this.fix(elm, bgPNG[1], 1);
|
---|
125 | this.childFix(elm);
|
---|
126 | }
|
---|
127 | } else {
|
---|
128 | if (data.tiles && data.tiles.src) {
|
---|
129 | this.tileBG(elm, '');
|
---|
130 | }
|
---|
131 | this.fix(elm, '');
|
---|
132 | }
|
---|
133 | } else if ((isPos || isClass) && data.tiles && data.tiles.src) {
|
---|
134 | this.tileBG(elm, data.tiles.src);
|
---|
135 | }
|
---|
136 |
|
---|
137 | if (init) {
|
---|
138 | this.hook.enabled = 1;
|
---|
139 | elm.attachEvent('onpropertychange', this.hook);
|
---|
140 | }
|
---|
141 | };
|
---|
142 |
|
---|
143 |
|
---|
144 | IEPNGFix.childFix = function(elm) {
|
---|
145 | // "hasLayout" fix for unclickable children inside PNG backgrounds.
|
---|
146 | var tags = [
|
---|
147 | 'a',
|
---|
148 | 'input',
|
---|
149 | 'select',
|
---|
150 | 'textarea',
|
---|
151 | 'button',
|
---|
152 | 'iframe',
|
---|
153 | 'object'
|
---|
154 | ],
|
---|
155 | t = tags.length,
|
---|
156 | tFix = [];
|
---|
157 | while (t--) {
|
---|
158 | var pFix = elm.all.tags(tags[t]),
|
---|
159 | e = pFix.length;
|
---|
160 | while (e--) {
|
---|
161 | tFix.push(pFix[e]);
|
---|
162 | }
|
---|
163 | }
|
---|
164 | t = tFix.length;
|
---|
165 | if (t && (/relative|absolute/i).test(elm.currentStyle.position)) {
|
---|
166 | alert('IEPNGFix: Unclickable children of element:' +
|
---|
167 | '\n\n<' + elm.nodeName + (elm.id && ' id=' + elm.id) + '>');
|
---|
168 | }
|
---|
169 | while (t--) {
|
---|
170 | if (!(/relative|absolute/i).test(tFix[t].currentStyle.position)) {
|
---|
171 | tFix[t].style.position = 'relative';
|
---|
172 | }
|
---|
173 | }
|
---|
174 | };
|
---|
175 |
|
---|
176 |
|
---|
177 | IEPNGFix.hook = function() {
|
---|
178 | if (IEPNGFix.hook.enabled) {
|
---|
179 | IEPNGFix.process(element, 0);
|
---|
180 | }
|
---|
181 | };
|
---|
182 |
|
---|
183 |
|
---|
184 | IEPNGFix.process(element, 1);
|
---|
185 |
|
---|
186 | </script>
|
---|
187 | </public:component>
|
---|