You are better off handling the mouse-overs using CSS, and the image loading can be done using the 'CSS' attribute in JQuery.
Try:
<style type="text/css">
.search
{
width:150px;
height:150px;
background:url('search.png') no-repeat center 50%;
margin:10px;
border:1px solid #000000;
float:left;
}
.search:hover
{
width:150px;
height:150px;
background:url('search_onhover.png') no-repeat center 50%;
cursor:pointer;
margin:10px;
border:1px solid #000000;
float:left;
}
.loading
{
width:150px;
height:150px;
margin:10px;
border:1px solid #000000;
float:left;
}
</style>
$(document).ready(function () {
$(".search").click(function (e) {
$(".loading").css("background-image","url('loading.gif')");
});
});
<div class="search"></div>
<div class="loading"></div>
EDIT: A more complete solution - if you want the loading box to cover the screen while loading and the AJAX function to hide it again once complete, then try the following:
<style type="text/css">
.search
{
width:150px;
height:150px;
background:url('search.png') no-repeat center 50;
margin:10px;
border:1px solid #000000;
float:left;
}
.search:hover
{
width:150px;
height:150px;
background:url('search_onhover.png') no-repeat center 50%;
cursor:pointer;
margin:10px;
border:1px solid #000000;
float:left;
}
.transparentCover
{
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:#000000;
opacity:0.4;
filter:alpha(opacity=40);
-moz-opacity:0.4;
-khtml-opacity:0.4;
z-index:100;
}
.loading
{
display:none;
position: fixed;
left: 50%;
top: 50%;
background-color: white;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
text-align:center;
background:url('loading.gif') no-repeat center 50%;
z-index:101;
}
</style>
$(document).ready(function () {
$(".search").click(function (e) {
$(".transparentCover").show();
$(".loading").show();
doLoad();
});
});
function doLoad() {
var myParam = 'somevalue';
$.ajax({
url: "/AJAX/myFunc.asmx/loadData",
type: "POST",
dataType: "json",
data: "{param1:" + myParam + "}",
contentType: "application/json; charset=utf-8",
success: function (msg) {
$(".transparentCover").hide();
$(".loading").hide();
}
});
}
<div class="search"></div>
<div class="transparentCover"></div>
<div class="loading"></div>