onmouseover not working in ie

kshatriy · #1 (**permalink**) 11-10-09, 11:58 PM

Hello pals,

HTML code:

HTML Code:

<dt><a href="#" onmouseover="addButton(this);" onmouseout="removeButton(this);">CNN News<img src="http://www.hotscripts.com/forums/images/cnn.gif" alt="cnn" style="width:67px; height:43px;"/></a></dt>

Javascript:

HTML Code:

function addButton(selected){ 
    var add = "CNN News<img src=\"http://www.hotscripts.com/forums/images/cnn.gif\" alt=\"cnn\" style=\"width:67px; height:43px;\"/><img id=\"add\" src=\"http://www.hotscripts.com/forums/images/add.gif\" alt=\"Add\" />";
    selected.innerHTML = add;
}

function removeButton(selected){ 
    var add = "CNN News<img src=\"http://www.hotscripts.com/forums/images/cnn.gif\" alt=\"cnn\" style=\"width:67px; height:43px;\"/>";
    selected.innerHTML = add;
}

Here my problem is:
when the mouse moved over image its not calling the addButton() but when mouse is outside of the image and on <a> element its calling the addButton() func.

<img> is a child of <a> element and its working fine in FF....

Any clues... Thanks in advance...

job0107 · #2 (**permalink**) 11-11-09, 01:12 PM

IE doesn't render innerHTML the same way as other browsers.
That is why you are having problems with your code.
Instead, define the 'add' image in the body and use javascript to toggle the display property.
Example:

HTML Code:

<html>
<head>
<script>
function add_remove_Button(selected,type){
 if(type){document.getElementById(selected).style.display = "inline";}
 else{document.getElementById(selected).style.display = "none";}
}
</script>
</head>
<body>
<dt><a href="#" onmouseover="add_remove_Button('add',1);" onmouseout="add_remove_Button('add',0);">CNN News<img src="http://www.hotscripts.com/forums/images/cnn.gif" alt="cnn" style="width:67px; height:43px;" /><img id="add" src="http://www.hotscripts.com/forums/images/add.gif" alt="Add" style="display:none;" /></a></dt>
</body>
</html>