Hello pals,

HTML code:

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

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

function removeButton(selected){ 
    var add = "CNN News<img src=\"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...

Edited by Nick Evan: Fixed formatting

8 Years
Discussion Span
Last Post by network18

Its working in the way it supposed to be.
The function addButton() is called onmouse hover of the anchor tag and everything i.e. first image and the next onwards all will be inside the achor tag only.So its very normal if the function is called on the hover of anchor tag or any of the images, because they are also the part of the anchor tag.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.