Question

I have code in one of the webpages as below –

<li><a href="howto.php" id="howto"><img id="imgHowTo" src="imghowto.png" />HOW TO</a></li>

This is the expected behavior –
on hovering the list item, the image should change to imgHowTo-new.png and the “HOW TO” text color should change to green (initially it was blue).

Now I do not have permission to modify the html or the css, and i have to achieve the expected behaviour using javascript.

I used the below js code –

document.getElementById("imgHowTo").onmouseover = HoverIn;
function HoverIn(){
newImg = "imgHowTo-new.png"
this.src = newImg;
this.parentNode.style.color = green;
}

Now on hovering on the icon, the image changes and text color is rightly updated. But I want these changes to happen when mouse hovers on the “list item” and not on the image/ text alone. How can i do this without changing the css/html? Also, how do i account for the presence of whitespace (#text) compatibility issue when childNodes are used to access the elements? I need this to work in all browsers.

thanks!

Answer 1

Well, you can do something like this:

(function() {
    var imgHowTo = document.getElementById("imgHowTo"),
        a        = imgHowTo.parentNode,
        li       = a.parentNode;
    li.onmouseover = HoverIn;
    function HoverIn(){
        imgHowTo.src = "imgHowTo-new.png";
        a.style.color = green;
    }
})();

(Note that I put the whole thing in a function, to avoid creating global variables.) I’d be concerned by how fragile it is, because it’s very closely tied to the HTML structure, but it should work for the structure you’ve listed.

What that does is find the img, then find the anchor you want to change the color of and the li you want to watch for the mouse event on, then hook up the event. Since you’re only moving up the hierarchy, you don’t have to worry about intermediate text nodes in this specific case, although that is something you frequently have to deal with when moving down the hierarchy or across siblings.

Somewhat off-topic, but note that mouseover fires repeatedly, so your HoverIn function will get called over and over again. That doesn’t really matter much because once it’s done its thing doing it again is harmless, but still…

---

Separately, for this sort of thing, it’s really worth using a good JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. They smooth over a lot of browser differences for you, offer tools to help you skip over text nodes (you mentioned being concerned about that), and just generally provide a lot of pre-built, pre-tested utility stuff that leaves you free to concentrate on your specific work.

For example, using (say) jQuery, I’d probably make the code a little less sensitive to HTML changes (not a lot, but some):

(function() {
    var imgHowTo = $("#imgHowTo"),
        a        = imgHowTo.closest("a"),
        li       = a.closest("li");
    if (li[0]) { // If the structure isn't there, we skip the event handler
        li.mouseover(HoverIn);
    }

    function HoverIn() {
        imgHowTo[0].src = "imgHowTo-new.png";
        a.css("color", "green");
    }
})();

That’s slightly more friendly to small HTML changes because it doesn’t assume that the anchor is the immediate parent of the image, or that the list item is the immediate parent of the anchor. So if someone wraps the anchor in a div, for instance, it still works.

Using jQuery, Prototype, or probably several of the others also gives you the mouseenter and mouseleave events (which are normally IE-only, but they’re emulated by libraries like jQuery and Prototype on other browsers), which are useful for hover effects because they don’t bubble.