<script src="/js/jquery-1.4.2.min.js" type="text/javascript"> </script>
<script src="/js/jquery.magnify.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function(){  
$(".Magnify div").magnify(  
/**  
* basic parameters, you can skip any of them  
*/  
{  
/**  
* max sensivity distance from mouse pointer in px  
* values: integer  
* default: 100  
*/  
distance:200,  
/**  
* distance calculation method  
* values: 'closest', 'center', function(){}  
* default: 'closest'  
*/  
distanceTo:'closest',  
/**  
* distance axis (skipping axis means any distance on it)  
* values: 'x','y','xy'  
* default: 'xy'  
*/  
axis:'xy',  
/**  
* you may skip some mouse events to balance smoothness/performance  
* value: integer  
* default: 0  
*/  
skipEvents:0,  
/**  
* do trigger magnifybefore, magnifyafter events  
* values: boolean  
* default: false  
*/  
triggerEvent:true,  
/**  
* magnifybefore callback (triggerEvent doesn't metter)  
* values: function(){}  
* default: null  
*/  
before:null,  
/**  
* magnifyafter callback (triggerEvent doesn't metter)  
* values: function(){}  
* default: null  
*/  
after:null,  
/**  
* ditance to delta translator  
* values: 'linear','sin','cos',function(){}  
* default: 'linear'  
*/  
delta:'linear'  
},  
/**  
* style properties  
* values: hash object like for jQuery.css()  
* default: {width:'200%',height:'200%'}  
* you also can pass any value as an array of stops:  
* full form: [{0.25:'#CC0'},{0.5:'#FF0'},{0.75:'#F00'},{1:'#F0F'}]  
* where 0.5 = 50% distance, 100% = 0px distance, 0% = max distance,  
* an equivalent short form: ['#CC0','#FF0','#F00','#F0F']  
* where stop=(indexOfTheStop+1)/stops.length,  
* or any mix of them  
*/  
{  
backgroundColor:[{0.9:"#FF0"},"#F00"],  
width:'200%',  
height:'200%',  
fontSize:'200%',  
borderTopColor:"#FFF",  
borderRightColor:"#FFF",  
borderBottomColor:"#FFF",  
borderLeftColor:"#FFF"  
}  
);  
$(".Magnify img").magnify({  
distance:200  
},{  
width:'200%',  
height:'200%',  
fontSize:'200%',  
backgroundColor:"#FFFFFF",  
borderColor:"#000000"  
});  
});  
</script>
<style type="text/css">  
.Cloud div{  
margin: auto;  
}  
.Area{  
border: dotted 1px #C0C0C0;  
width: 480px;  
height: 500px;  
}  
.Magnify div{  
background-color: #CC0;  
border: solid 1px #000000;  
width: 50px;  
height: 50px;  
text-align: center;  
}  
.Magnify img{  
background-color: #000000;  
border: solid 1px #FFFFFF;  
}  
</style>

<div class="Area">
<table class="Magnify Cloud">
<tr><td><div/></td><td><div/></td><td><div/></td></tr>
<tr><td><div/></td><td><div/></td><td><div/></td></tr>
<tr><td><div/></td><td><div/></td><td><div/></td></tr>
</table>
</div>

<div class="Area">
<table class="Magnify Image">
<tr>
<td></td>
<td><div>jQuery</div></td>
<td><div>jQuery</div></td>
<td><div>jQuery</div></td>
</tr>
<tr><td><img src="Ссылка на картинку" width="100" height="100"/></td></tr>
<tr><td><img src="Ссылка на картинку" width="100" height="100"/></td></tr>
<tr><td><img src="Ссылка на картинку" width="100" height="100"/></td></tr>
</table>
</div>