Hi

I have 2 types of buttons that i need to rollover the images on hover, and also need title / alt tags when images.

I've been battling this for weeks now and i cannot simply how i'm doing it.  *i'm very very noob to jquery please be patient*

So here i have the jquery code for input buttons and for <a> link buttons

1. jQuery(function($) {
       $('input[type="image"]').hover(
           function () { $(this).attr("src", $(this).attr("src").split('-off').join('-on')); },
           function () { $(this).attr("src", $(this).attr("src").split('-on').join('-off')); }
       );
   
   $("img.buttons").hover(
   function () { this.src = this.src.replace("_off","_on");
   },
   function () { this.src = this.src.replace("_on","_off");
   }
   );
   
   
   
   
   
   
   
   
   
   
   

Here is the markup for input buttons

1.  <input type="image" src="skins/{VAL_SKIN}/styleImages/buttons/join-off.gif" alt="Join Now" />
   

Here is the one for my links

1. <img src="skins/{VAL_SKIN}/styleImages/buttons/lpmore_off.gif" alt="More" border="0" class="buttons" /></a></div>
   

Is there any way to simplify the jquery code?

Also does the document ready i'm using allow me to use multiple libraries? side-by-side?

Thank-you :)
Jess