Member Avatar for kshatriy

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>

Javascript:
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 because: Fixed formatting
  • 2 Contributors
  • 1 Reply
  • 79 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by network18
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.