Jquery - changing img source from a list of links ?

Question

Hi

I have a list of links with an icon next to it - I'd like to be able to change the icon img source when the mouse is over a link (so that each link will change the icon to a different image) and I'd like to do it with jquery but I can't figure out what's the best way of doing it.

Ideally I'd like to give the links a class so I can use that in the jquery selector but how would I then send the name of the image to load to the jquery function ? do I need to define an attribute in each link that contains the image name ? how would I preload the images if I did it like this ?

thanks for any help you can give - I really need to get this done quickly !!

Answer 1

you haven't specified image source to your question, so I'm assuming label attribute for image source,

Try the Demo : http://jsbin.com/ubipo3

$(function() {
  var arey = [];
  $('.links').each(function() {
    var img = new Image(); //preload Images
    img.src = $(this).attr('label');
    arey.push(img);   
  }).hover(function(){
    $('#icon').attr('src',$(this).attr('label')); 
  });
});