asp.net with JS to achieve the mouse to small map, automatic display corresponding large map _ practical skills

Implementation according to the background binding small picture, mouse move to small map, automatic display corresponding large image

. NET Compact 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 large 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/a;
DH = dh/a;
}
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%>
'--------------the mouse over the picture------
<% if RS ("picture") <> "then%>
<a onmouseover= "getshowimg (", "<%=rs (" picture ")%> '); >
"alt=" Dogo "width=" "height=" border= " "0" ></a>
<%end if%>