I'm pretty new to front UI developement and have been using JQuery for about 6 months. Love it so far!

I am trying to get a image to swap out on mouseover and then go back on mouseout.  I found a basic example StackTrace but I cannot seem to get it to work.  When I mouseover, the image's scr changes to:  

assets/images/photo1 undefined...

I'm hoping another set of eyes can spot the issue and provide guidance.  Thanks!!

2.     <img src="assets/images/photo-1.jpg" id="imgBrand1" />
3. 
   
4.     <script src="assets/javascript/jquery-2.1.1.js"></script>
6. <script>
7.             $('document').ready(function ()
8.         {
9.             $(function ()
10.             {
11.                 $("#imgBrand1")
12.                     .mouseover(function ()
13.                     {
14.                         var src = $(this).attr("src").match(/[^\.]+/) + "assets/images/photo-2.jpg";
15.                         $(this).attr("src", src);
16.                     })
17.                     .mouseout(function ()
18.                     {
19.                         var src = $(this).attr("src").replace("assets/images/photo-2.jpg");
20.                         $(this).attr("src", src);
21.                     });
22.             });
23.         });
24. 
    
25. </script>
26. 
    

Viewing source shows me (on mouseover)...

<img src="assets/images/photo-1undefinedundefinedundefinedundefined" id="imgBrand1">

Thanks!