Změna obrázku v png při najetí myši v IE

Chtěl bych poprosit o radu, patlám se s tím už docela dlouho a jsem v koncích. Potřebaval bych vyrobit menu u kulatých ikonek, které se při najetí zvětší podle tohoto řešení:

http://wellstyled.com/css-nopreload-rollovers.html

Jsou uložené v png, aby okraje nebyly zubaté jako v gifu. Jenomže MSIE nebere průhlednost png správně a nechává u něj šedé pozadí. Našel jsem i javascript, který to opraví, ale nefunguje na obrázky v pozadí prvku (v css).

Zkoušl jsem i několik jiných způsobů, jako měnit ty obrázky přes javascript událostí OnMouseOver ale to buď fungovalo zvětšování nebo úprava png od šedého pozadí.

Díky za každý nápad...

Tady posílám ten script, ať se můžem bavit konkrétně:


<script language="JavaScript">
<!--
function getAppVersion() {
appname= navigator.appName;
appversion = navigator.appVersion;
majorver = appversion.substring(0, 1);
if ( (appname == "Netscape") && ( majorver >= 3 ) ) return 1;
if ( (appname == "Microsoft Internet Explorer") && (majorver >= 4) ) return 1;
return 0;
}
function swtch(num, imgname) {
if (getAppVersion()) {
document[imgname].src = img[num].src;
}
}
imgsrc = new Array();
imgsrc[1] = "obrazky/fast.png";
imgsrc[2] = "obrazky/fast1.png";

if (getAppVersion()) {
img = new Array();
for (i = 0; i < imgsrc.length; i++) {
img[i] = new Image();
img[i].src = imgsrc[i];
}
}
function correctPNG()
{
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) == "PNG")
{
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 class='obrazek' " + 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
}
}
}
}
window.attachEvent("onload", correctPNG);

//-->
</script>


<a href="odkaz.html"
onMouseOut="self.document['obr1'].src='obrazky/fast.png';"
onMouseOver="self.document['obr1'].src='obrazky/fast1.png';">
<img name="obr1" src="obrazky/fast1.png" />
</a>

díky, zkusím to s tím text-ident, mohlo by to jet...