I am trying to create a simple effect as an exercise basically I want the image to change when I hover over it and revert back when I mouse off

```
     <!DOCTYPE html>
     <html>
        <head>
            <title>Change pics on event</title>
            <meta charset = "utf-8">
            <script src = "jsf/jquery-1.8.js"></script>
            <link rel = "stylesheet" href = "talkpics.css">

        </head>
        <body>
            <div id = "pic">
                <img id = "sk" src = "tpi/skutch.jpg">
                <div id = "speech">
                   <img src = "tpi/speech5.png">
                </div>
            </div>
            <script>
                $(document).ready(function (){
                        $("#sk").hover(function(){
                        $(this).attr("src","tpi/skutch2.jpg");
                            }, function(){
            $(this).attr("src", "tpi/skutch.jpg");          
                              }
                });
            });
            var sb = new Array();
                sb[0] = 'tpi/speech1.png';
                sb[1] = 'tpi/speech2.png';
                sb[2] = 'tpi/speech3.png';
                sb[3] = 'tpi/speech4.png';
                sb[4] = 'tpi/speech5.png';

            </script>
        </body>
    </html>

```

the array is part of something else I want to add later which is a random png speech bubble ..basically I want the image to change with a random speech bubble when you roll over it. but for now my issue is getting the skutch image to change. I have followed tutes on the net and have coded as examples have given but it won't work the image stays on skutch.jpg. I'm not sure why any help would be awesome.

```
*{
padding:0px;
margin:0px;
border:none;
}

#pic{
height:500px;
width:500px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
}

#sk{
position:relative;
}
#speech{
position:relative;
top:-450px;
left:-20px;
}

```