Here I have explain to display an image on mouse over on the image control.when you move your mouse on the image then another iimage will be displayed,when you mouse out over the image then mouse tip will be removed .this can be achieved using simple java script .
Intially add an image on the imagecontrol,Already I have written an articles how to show image in using image control on grid view for your reference I gave link below…
Then add one div tag name it “imgdiv” make it as visible as hidden.
<div id="imgdiv" style="position: absolute; z-index: 2; border: solid 1px black;visibility: hidden;">
</div>
In the image control add the line onmouseover and onmouseout function …like the code below
<asp:Image ID="Image1" runat="server" Width="100" Height="100" ImageUrl='<%#eval("ImageURL")%>' onmouseover="ShowBiggerImage(this);" onmouseout="ShowDefaultImage(this);" />
When you mouse over the image div tag visible on mouse pointer and show the image on div
Then copy the below javascript code and pase into head tag
<head>
<script type="text/javascript" language="ecmascript">
function ShowBiggerImage(obj)
{
document.getElementById ("imgdiv").style .visibility ="visible";
document.getElementById("imgdiv").innerHTML = "<img src='" + obj.src + "'+'width=150 height=200' >";
document.getElementById("imgdiv").style.left = event.clientX ;
document.getElementById("imgdiv").style.top = event.clientY ;
document.getElementById("imgdiv").style.zIndex = "0";
}
function ShowDefaultImage(obj)
{
document.getElementById("imgdiv").innerHTML = "";
document.getElementById("imgdiv").style .visibility ="hidden";
}
</script>
</head>
I hope this one helpful to all….....
0 comments:
Post a Comment