When the mouse moves to the picture, the large picture is displayed

Part of the HTML tag, for informational purposes only

<tr>
<td><input type= "checkbox" class= "CheckBox1"/></td>
<td>1002</td>
<td> Kitten </td>
<td></td>//pictures
<td>200</td>
<td><input type= "button" value= "Add"/></td>
</tr>

//write outside, hide display, position cue picture location

. clsimg{
Position:absolute;
border:1px solid #ccc;
width:200px;
height:200px;
Display:none;

}

JS Partial realization Function:

<script type= "Text/javascript" src= ". /jquery-1.8.3.js "></script>
<script type= "Text/javascript" >
$ (function () {

$ ("Table tr:nth-child (Odd)"). CSS ("Background", "#CCF"); Odd-even row discoloration

var x=5; var y=15;
$ ("Table tr td img"). MouseMove (function (e) {
$ ("#imgTip"). attr ("src", this.src). css ({"Top":(e.pagey+y) + "px", "left":(e.pagex+x) + "px"}). Show (600);
});

$ ("Table tr td img"). Mouseout (function () {
$ ("#imgTip"). Hide ();
});

/* check box Single Event */

$ ("#checkAll"). Click (function () {
if (this.checked) {
$ ("Table tr TD Input[type=checkbox]"). attr ("Checked", true);
}else
{
$ ("Table tr TD Input[type=checkbox]"). attr ("checked", false);
}
});

});
</script>