When you move the mouse over a small image, a large image is displayed-image prompt is displayed.

As it is required to display a large image when you move the mouse over a small image, I sent a jquery file to implement the result. Now I will share it with you:

First, download the jquery plug-in, create a tooltip. js file, and write the followingCode:

$ (Function (){
VaR x = 10;
Var y = 10;
$ ("A. tooltip"). Mouseover (function (e ){
This. mytitle = This. title;
This. Title = "";
VaR tooltip = "<Div id = 'tooltip '> <\/div>"; // create a div Element
$ ("Body"). append (tooltip); // append it to the document
$ ("# Tooltip ")
. CSS ({
"TOP": (E. Pagey + Y) + "PX ",
"Left": (E. pagex + x) + "PX"
}). Show ("fast"); // sets the X and Y coordinates and displays
}). Mouseout (function (){
This. Title = This. mytitle;
$ ("# Tooltip"). Remove (); // remove
}). Mousemove (function (e ){
$ ("# Tooltip ")
. CSS ({
"TOP": (E. Pagey + Y) + "PX ",
"Left": (E. pagex + x) + "PX"
});
});
})
//]>

 

Import two. js files on the page,

 

<SCRIPT src = "../javascripts/jquery-1.3.1.js" type = "text/JavaScript"> </SCRIPT>

<SCRIPT src = "../javascripts/tooltip. js" type = "text/JavaScript"> </SCRIPT>

Finally, you can bind the image to the mark:

<A href = "<% # databinder. eval (container. dataitem," imagebigurl ") %>" class = "tooltip"> // large image prompt
<Asp: imagebutton id = "image1" runat = "server" imageurl = '<% # databinder. eval (container. dataitem, "imagesmallurl") %> 'width = "50px" Height = "50px"/> </a>