In asp.net, move the mouse over a small image using js to automatically display the corresponding large image.

Bind a small image to the background, move the cursor to the small image, and automatically display the corresponding large image.

. Net simplified version

<Script language = "JavaScript">
Function GetShowImg (imgfile)
{
Document. all ("ShowImage"). src = "/semir/images/" + imgfile;

}
</Script>
// DataList binding
<Asp: datalist id = "DlSides" runat = "server" OnItemCommand = "DlSides_ItemCommand" RepeatDirection = "Horizontal"
RepeatColumns = "3" DataKeyField = "SideID" CssClass = "semirText">
<ItemTemplate>
<A onmouseover = "GetShowImg ('<% # DataBinder. eval (Container. dataItem, "sidePath") %> ') "> 'border = 0> </a>
</ItemTemplate>
</Asp: datalist>


// Display the corresponding big image


ASP full version

<Script language = "JavaScript">
Function ImagePreload ()
{
Var args = ImagePreload. arguments;
Document. ImgPreArray = new Array (args. length );
For (var I = 0; I <args. length; I ++)
{
Document. ImgPreArray [I] = new Image;
Document. ImgPreArray [I]. src = "admin/upfile/newbook/" + args [I];
}
}
Function fitSize (){
Var a, B;
Var imgobj = document. all ("ShowImage ");
Var oldimg = new Image ();
Oldimg. src = imgobj. src;
Var dw = oldimg. width;
Var dh = oldimg. height;
If (imgobj = null ){
SetTimeout ("fitSize ()", 50 );
Return;
}
If (imgobj. offsetWidth = 0 ){
SetTimeout ("fitSize ()", 50 );
Return;
}
Var maxW = 300;
Var maxH = 270;
If (dw> maxW | dh> maxH ){
A = dw/maxW;
B = dh/maxW;
If (B> a) a = B;
Dw = dw/;
Dh = dh/;
}
If (dw> 0 & dh> 0 ){
Imgobj. width = dw;
Imgobj. height = dh;
}
}
Function GetShowImg (imgtext, imgfile ){
Document. all ("ShowImgText"). innerHTML = imgtext;
Document. all ("ShowImage"). src = "admin/upfile/newbook/" + imgfile;
Document. all ("ShowImage"). width = 267;
Document. all ("ShowImage"). height = 267;
// FitSize (); 'show picture size
}
Function ShowTextDetail (n ){
For (I = 1; I <5; I ++ ){
Document. all ("TextDetail" + I). style. display = "none ";
}
Document. all ("TextDetail" + n). style. display = "";
For (I = 1; I <4; I ++ ){
Document. all ("TitleDetail" + I). className = "shopTabOff ";
}
If (n <4 ){
Document. all ("TitleDetail" + n). className = "shopTabOn ";
}
}
</Script>
<Script language = "JavaScript" for = "window" event = "onload">
ImagePreload ('<% = rs ("picture") %> ');
</Script>
'--------- Call-display -------
<% If rs ("picture") <> "" then %>
<A style = "cursor: hand">
"border =" 0 "width =" 267 "height =" 267 ">
<! -- -->
</A> <span id = "ShowImgText" style = "font-weight: bold;"> </span>
<% End if %>
'-------------- Move the mouse over the image ------
<% If rs ("picture") <> "" then %>
<A onmouseover = "GetShowImg ('', '<% = rs ("picture") %>'); ">
"alt =" dogo "width =" 40 "height =" 30 "border =" 0 "> </a>
<% End if %>