Question

First question using stackoverflow! yay!

I have a site I’m developing. It uses images as the menu options, and on hover, I’ve changed the img src in jquery

When you click the menu you want to go to, i want the image on hover to stay there.
I did this:
$("#one").click(function(){
$(this).attr('src', 'images/hover1.jpg');
$(this).unbind('mouseleave mousehover');


So this is successful but the upon another menu click, i cant get the hover image to go away, and then it doesnt hover anymore (cause i unbinded it) – but binding it upon another menu click wasnt working.

Any suggestions?

Answer 1

First of all. I think its recommend to create a CSS solution here.

I checked out your javascript file and did some modifications in my browser. Finally I build you a possible working solution.

$(document).ready(function() {

   var hoverfuncIn = function(){ $(this).attr('src', $(this).attr('src').replace(/(\D)(\.jpg)$/g,'$12$2')); };
   var hoverfuncOut = function(){ $(this).attr('src', $(this).attr('src').replace(/2(\.jpg)$/g,'$1')); };
   var clickToggle = function(e){
    $('.selected').hover(hoverfuncIn,hoverfuncOut).removeClass('selected').mouseout();
        $(e.currentTarget).addClass('selected').unbind('mouseleave mousehover');
}

   $('nav img').hover(hoverfuncIn,hoverfuncOut);

   $("#one").click(function(e){
      clickToggle(e);

...