puzjob, class="gallery" class="main-img1"
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main-img1{
width: 100px;
height: auto;
}
li{
float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.fn.preload = function() {
this.each(function() {
$("<img/>")[0].src = this
})
};
$(".gallery").each(function(c, a) {
$("li img", a).hover(function() {
$(".main-img1", a).attr("src", $(this).attr("src").replace("thu mb/", ""))
});
var b = [];
$("li img", a).each(function() {
imgUrl = this.src.replace("thumb/", "");
b.push(imgUrl)
});
$(b).preload()
})
});
</script>
</head>
<body>
<div class="gallery">
<table id="table" border="0">
<tr><td valign="top">
<img src="./img/catalog/host/1/1.jpg" alt="" class="main-img1" />
</td>
<td align="center" valign="top">
<ul>
<li><img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" width="100" /></li>
<li><img src="http://javascript.ru/forum/images/smilies/cray.gif" alt="" width="100" /></li>
<li><img src="http://javascript.ru/forum/images/smilies/write.gif" alt="" width="100" /></li>
</ul>
</td>
</tr>
</table>
</div>
<div class="gallery">
<table id="table" border="0">
<tr><td valign="top">
<img src="./img/catalog/host/1/1.jpg" alt="" class="main-img1" />
</td>
<td align="center" valign="top">
<ul>
<li><img src="http://javascript.ru/forum/images/smilies/smile.gif" alt="" width="100" /></li>
<li><img src="http://javascript.ru/forum/images/smilies/cray.gif" alt="" width="100" /></li>
<li><img src="http://javascript.ru/forum/images/smilies/write.gif" alt="" width="100" /></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>