jQuery mouseenter toggle -

i have 3 'tabs' using images follows:-

for each tab there 3 images:-

• bookaccount.png (default - orange)
• bookaccount-a.png (active - white)
• bookaccount-h.png (hover - blue)

the same bookcash.png , bookguest.png.

by default wanting 'guest' stay active tab , other tabs in orange have:

<div id="main-online-user">      <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="one 2 1 guest" id="img-onlinebooking-guest" class="left" src="images/bookguest-a.png" /></a>      <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login.php')"><img alt="one 2 1 account" id="img-onlinebooking-acc" class="left" src="images/bookaccount.png" /></a>      <a href="javascript:void(0)" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="one 2 1 cash" id="img-onlinebooking-cash" class="left" src="images/bookcash.png" /></a>  </div> 

for hover events doing @ moment:-

    $("#img-onlinebooking-guest").hover(function() {           $(this).attr("src", "images/bookguest-h.png");     });      $("#img-onlinebooking-guest").mouseleave(function() {           $(this).attr("src", "images/bookguest.png");     }); 

the problem (say guest active - white), , hover on it, when leave element change image orange (default) when still active tab.

what want able either:-

if image active element, when hover on it, nothing happens. (this better option)

or, if active element hovered, on mouseout reverts colour before mouseenter event.

i'm not sure how can appreciate help!

(i know can use jquery tabs, client wanting these images don't have choice)

edit::

i have added 'active' class #img-onlinebooking-guest , have changed jquery to:-

    $("#img-onlinebooking-guest").click(function() {            $(this).addclass('active');          $('#img-onlinebooking-cash, #img-onlinebooking-acc').removeclass('active');          $(this).attr("src", "images/bookguest-a.png");          $('#img-onlinebooking-acc').attr("src", "images/bookaccount.png");          $('#img-onlinebooking-cash').attr("src", "images/bookcash.png");      });      $("#img-onlinebooking-acc").click(function() {            $(this).addclass('active');          $('#img-onlinebooking-guest, #img-onlinebooking-cash').removeclass('active');          $(this).attr("src", "images/bookaccount-a.png");          $('#img-onlinebooking-guest').attr("src", "images/bookguest.png");          $('#img-onlinebooking-cash').attr("src", "images/bookcash.png");      });      $("#img-onlinebooking-cash").click(function() {           $(this).addclass('active');          $('#img-onlinebooking-guest, #img-onlinebooking-acc').removeclass('active');          $(this).attr("src", "images/bookcash-a.png");          $('#img-onlinebooking-guest').attr("src", "images/bookguest.png");          $('#img-onlinebooking-acc').attr("src", "images/bookaccount.png");      });      $('#img-onlinebooking-guest:not(.active)').hover(          function () {             $(this).attr("src", "images/bookguest-h.png");         },          function () {             $(this).attr("src", "images/bookguest.png");      });      $('#img-onlinebooking-acc:not(.active)').hover(          function () {             $(this).attr("src", "images/bookaccount-h.png");         },          function () {             $(this).attr("src", "images/bookaccount.png");      });      $('#img-onlinebooking-cash:not(.active)').hover(          function () {             $(this).attr("src", "images/bookcash-h.png");         },          function () {             $(this).attr("src", "images/bookcash.png");      }); 

it seems quite messy anyway, working 'guest' tab have added class 'active' within html, doesn't work other tabs. if click 'cash' makes images active (white) on mouseout still changing colour orange (default) when should stay white have added class 'active' element on click.

any ideas?

you can see here; link

you can this:

on click of image set class called, lets active

$("#img-onlinebooking-guest").click(function () {     $(this).addclass('active'); }); 

and if not active link, can hover logic

$('#img-onlinebooking-guest:not(.active)').hover(  function () {     $(this).attr("src", "images/bookguest-h.png"); },  function () {     $(this).attr("src", "images/bookguest.png"); });