Javascript IE PNG fix
I adapted the pngfix.js to be rails friendly. Not that I should be using image tags anyway.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (document.body.filters)) {
var i;
var length = document.images.length;
for(i = 0; i < length; i++) {
var img = document.images[i];
var re = /\w+\.[Pp][Nn][Gg]\w*/;
if (img && re.exec(img.src)) {
var imgTitle = img.title ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
imgStyle = img.parentElement.href ? "cursor:pointer;" : "";
imgStyle += "width:" + img.width + "px; height:" + img.height + "px;";
imgStyle += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\'" + img.src + "\', sizingMethod='scale');";
var strNewHTML = "<span " + imgTitle + " style=\"display:inline-block; " + imgStyle + " \"></span>";
img.outerHTML = strNewHTML;
i = i - 1;
}
}
}
|
Then add this somewhere in your <head>
1 2 3 |
<!--[if lt IE 7]> <script defer type="text/javascript" src="/javascripts/pngfix.js"></script> <![endif]--> |
The only other requirement is you specify a width and height on your image_tags
|
|
<%= image_tag("fam/date.png", :alt => "ical", :width => "16px", :height => "16px") %> |
Though you should use CSS for most images, this is a fast way to make your png’s work in IE6.