Change image source by hovering on a label

Question

Hi,

I have multiple labels on a bar my web page and I want when I hover on that label, image in other div should change based on the label being hovered.

Any help would be highly appreciared.

• Sjain

Answer 1

With jQuery, the popular javascript library, you could do it rather easily:

-- Sample HTML

<label class="target">Hover to Change</label> 
<img src="image001.gif" class="sourceImage" />

-- Corresponding jQuery

$("label.target").hover(
  function () {
    // mousing-over <label class="target"> changes img to 'image002.gif'
    $("img.sourceImage").attr("src", "image002.gif");
  },
  function () {
    // mousing-out <label class="target"> changes img to 'image001.gif'
    $("img.sourceImage").attr("src", "image001.gif");
  }
);

Answer 2

Hey Jonathan,

Thanks for ur response, i tried ur suggestion but its not really working for me. the reason is that I hadn't framed by query well. I am new to jquery. What I am really into is that fecthing the src of image based on the label selected, the values for label text and image source are coming from database. Moreover label is enclosed in the anchor tag as each entity associated is links to an external url as well. please help me resolve this. _ Sjain