DNN Accordion Menu Issue with PNG images mouse over in Internet Explorer

I was working with DotnetNuke(DNN) site development and after applying the skin that I have accordion menu in leftnav , hover images are not getting displayed in mouse over.
I was using jQuery to call mouseover images dynamically from the script.

This is the script that I am using

[NavMenu-Container[ <ul id="{NavMenu.Id}"> ]]
[Level0-Container [ <li> ]]
[Level0-Item[ <div IIF({Page.HasChildren}=true,class="menuTitle")><a class="menua" IIF({Page.HasChildren}=false,href="{Tab.Url}",href="#") title="{Tab.Title}"><img class="LinkIcon" src="{SkinPath}images/{Page.IconFile}" alt="" style="border:0 ;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{SkinPath}images/{Page.IconFile}',sizingMethod='scroll');
" onmouseover="this.src=this.src.replace('.png','_hover.png')" onmouseout="this.src=this.src.replace('_hover','')" id="img{Tab.id}" /></a></div><div IIF({Page.HasChildren}=true,class="submenu" id="sub{Tab.id}")> ]]
[Level1-Item[<span> ]]
[Level1-Anchor[ <a href="{Tab.Url}" title="{Tab.Title}">{Tab.Name}</a>]]
[/Level1-Item[</span> ]]`
[/Level0-item[</div>]]
[/Level0-Container[ </li> ]]
[/NavMenu-Container[ </ul> ]]


As it clearly shows I am replacing normal images with hover images with the images appending _hover to the image name in mouse over and in mouse out with normal image names. But the problem I got here is the mouse over didn’t work in IE after the images are loaded and it is working fine in FF (Fire Fox) browser irrespective of loading images. After spending considerable amount of time, I came to know that the issue is with the PNG image, as I replace a JPEG image it works well.

Cause:
The issue with the menu was being caused by a combination of the pngfix.js and the accordion menu template. The reason it wasn't working in IE 7 or IE 8 was because the conditional comment was targeting all IEs. We need to make sure when using png fix that the conditional comment targets IE 6 or less than IE 7--



This fixed the issue in IE 7 and IE 8, however, due to the way the accordion menu is built using the template, the issue still existed in IE 6. I swapped over to using the iepngfix instead, and made a skin_ie.js which I put in the conditional comment and targeted each menu image directly and coded the swaps there

Resolution /Fix

We need to replace image in the mouse over as the code below:

 
// JavaScript Document
jQuery(document).ready(function(){
//mention hover image by specifying ID for the image      
jQuery("#img55").hover(function() {
  jQuery(this).attr('src', DNN_skinPath + 'images/home_hover.png') },
//mouse out image
  function () { jQuery(this).attr('src', DNN_skinPath + 'images/home.png') 
 }); 
 jQuery("#img57").hover(function() {
  jQuery(this).attr('src', DNN_skinPath + 'images/officeInfo_hover.png') },
  function () { jQuery(this).attr('src', DNN_skinPath + 'images/officeInfo.png') 
 });
 jQuery("#img66").hover(function() {
  jQuery(this).attr('src', DNN_skinPath + 'images/patientInfo_hover.png') },
  function () { jQuery(this).attr('src', DNN_skinPath + 'images/patientInfo.png') 
 });
 
});