Image does not change on mouse over using jquery function - php

Question

<a href="#">
<div class="col-md-5 campaigns" id="hoverimg">
<img class="featurette-image img-responsive" src="images/tee1.png" >
<li class="progressbar">
<p>
<!--<strong>Orders Completed</strong>--> <span class="pull-right small muted">78%</span>
</p>
<div class="progress tight">
<div class="bar" style="width: 78%;">
</div>
</div>
</li>
<div class="prodheading">
<h2>Heading 1</h2>
</div>
</div>
</a>
jQuery code:
<script>
$('document').ready(function ()
{
$(function ()
{
$("#hoverimg")
.mouseover(function ()
{
var src = $(this).attr("src").match(/[^\.]+/) + "images/tee2.png";
$(this).attr("src", src);
})
.mouseout(function ()
{
var src = $(this).attr("src").replace("images/tee2.png");
$(this).attr("src", src);
});
});
});
</script>
I am not getting the real problem behind this.

Answer 1

Your JavaScript is completely commented out by having // in front of every line. These will have to be removed if you want anything to happen.
There are some issues:
.replace() is a JavaScript String method and requires two arguments:
the regular expression and
the replacement string.
.match(/[^\.]+/) + "images/tee2.png probably does not work as you expect it to do: .match(/[^\.]+/) will return the first part of the string it is applied on that does not cointain a dot ('.'). Is this really what you want to do?
example:
"path/subpath/filename.ext".match(/[^\.]+/) + "images/tee2.png"
will return
"path/subpath/filenameimages/tee2.png"

Answer 2

You have applied the id to the div tag and in jquery you are trying to get the src. You must assign the id to the img tag.

Answer 3

$("#hoverimg1").hover(
function() {$(this).attr("src","images/teee2.png");},
function() {$(this).attr("src","images/teee1.png");
});