/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] PNG Fix alteration

Hi all. I need a png fix script that will work for dynamically generated content (something like [url]http://207.179.75.89/cas/modules.php?name=Media&sp_id=110)[/url]. I’ve pulled this off for img tags, but i need it to work with css background images and such. The following script is one that i use often (and it works well) i just need some help in modding it so that it doesn’t search for .png extension but rather applies to all content except .jpg, .gif, etc. Thanks for the help! ?

[CODE]var supersleight = function() {

var root = false;
var applyPositioning = true;

// Path to a transparent GIF image
var shim = ‘scripts/x.gif’;

// RegExp to match above GIF image name
var shim_pattern = /x.gif$/i;

var fnLoadPngs = function() {
if (root) {
root = document.getElementById(root);
}else{
root = document;
}
for (var i = root.all.length – 1, obj = null; (obj = root.all[i]); i–) {
// background pngs
if (obj.currentStyle.backgroundImage.match(/.png/i) !== null) {
bg_fnFixPng(obj);
}
// image elements
if (obj.tagName==’IMG’ && obj.src.match(/.png$/i) !== null){
el_fnFixPng(obj);
}
// apply position to ‘active’ elements
if (applyPositioning && (obj.tagName==’A’ || obj.tagName==’INPUT’) && obj.style.position === ”){
obj.style.position = ‘relative’;
}
}
};

var bg_fnFixPng = function(obj) {
var mode = ‘scale’;
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == ‘no-repeat’) {
mode = ‘crop’;
}
obj.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + src + “‘, sizingMethod='” + mode + “‘)”;
obj.style.backgroundImage = ‘url(‘+shim+’)’;
};

var el_fnFixPng = function(img) {
var src = img.src;
img.style.width = img.width + “px”;
img.style.height = img.height + “px”;
img.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + src + “‘, sizingMethod=’image’)”;
img.src = shim;
};

var addLoadEvent = function(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};

return {
init: function() {
addLoadEvent(fnLoadPngs);
},

limitTo: function(el) {
root = el;
},

run: function() {
fnLoadPngs();
}
};
}();

// limit to part of the page … pass an ID to limitTo:
// supersleight.limitTo(‘header’);

supersleight.init();[/CODE]

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@kierhonauthorFeb 27.2008 — The old one i used (for just image tags) was as follows:
/*

Correctly handle PNG transparency in Win IE 5.5 & 6.

http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:

<!--[if lt IE 7]>

<script defer type="text/javascript" src="pngfix.js"></script>

<![endif]-->

*/

function pngfix() {

var arVersion = navigator.appVersion.split("MSIE")

var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) != "GIF" && imgName.substring(imgName.length-3, imgName.length) != "JPG" && imgName.substring(imgName.length-3, imgName.length) != "JPEG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}

}[/QUOTE]
Copy linkTweet thisAlerts:
@kierhonauthorFeb 29.2008 — A buddy solved this for me. Here's the solution if anyone wants it:

[CODE]var supersleight = function() {

var root = false;
var applyPositioning = true;

// Path to a transparent GIF image
var shim = 'themes/spartan/javascript/x.gif';

// RegExp to match above GIF image name
var shim_pattern = /x.gif$/i;



var fnLoadPngs = function() {
if (root) {
root = document.getElementById(root);
}else{
root = document;
}

for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {

// background pngs
if ((obj.currentStyle.backgroundImage.match(/.gif")$/i) == null) && (obj.currentStyle.backgroundImage.match(/.jpg")$/i) == null) && (obj.currentStyle.backgroundImage.match(/.jpeg")$/i) == null) && (obj.currentStyle.backgroundImage != "none")) {
bg_fnFixPng(obj);
}


// image elements
if ((obj.tagName=='IMG' && obj.src.match(/.gif$/i) == null) && (obj.tagName=='IMG' && obj.src.match(/.jpg$/i) == null) && (obj.tagName=='IMG' && obj.src.match(/.jpeg$/i) == null)){
el_fnFixPng(obj);
}
// apply position to 'active' elements
if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
obj.style.position = 'relative';
}
}
};

var bg_fnFixPng = function(obj) {
var mode = 'scale';
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
mode = 'crop';
}
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
obj.style.backgroundImage = 'url('+shim+')';
};

var el_fnFixPng = function(img) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='image')";
img.src = shim;
};

var addLoadEvent = function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};

return {
init: function() {
addLoadEvent(fnLoadPngs);
},

limitTo: function(el) {
root = el;
},

run: function() {
fnLoadPngs();
}
};
}();

// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');
supersleight.init();[/CODE]
×

Success!

Help @kierhon spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...