想要在其中的图像上使用鼠标悬停 [英] want to use mouseover on image which is in
本文介绍了想要在其中的图像上使用鼠标悬停的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我想创建onmouse来查看像这样的大图像"http://blog.ysatech.com/"
为此，我已经创建了这样的编码，但是它不能正常工作，所以请帮助我解决这个问题.....
我的aspx页面
例如代码
<script type="text/javascript">
function LoadDiv(url) {
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
imgLoader.style.display = "block";
img.onload = function() {
imgFull.src = img.src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
img.src = url;
var width = document.body.clientWidth;
if (document.body.clientHeight > document.body.scrollHeight) {
bcgDiv.style.height = document.body.clientHeight + "px";
}
else {
bcgDiv.style.height = document.body.scrollHeight + "px";
}
imgDiv.style.left = (width - 650) / 2 + "px";
imgDiv.style.top = "20px";
bcgDiv.style.width = "100%";
bcgDiv.style.display = "block";
imgDiv.style.display = "block";
return false;
}
function HideDiv() {
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
if (bcgDiv != null) {
bcgDiv.style.display = "none";
imgDiv.style.display = "none";
imgFull.style.display = "none";
}
}
</script>
<style type="text/css">
body
{
margin: 0;
padding: 0;
height: 100%;
overflow-y: auto;
}
.modal
{
display: none;
position: absolute;
top: 0px;
left: 0px;
background-color: black;
z-index: 100;
opacity: 0.8;
filter: alpha(opacity=60);
-moz-opacity: 0.8;
min-height: 100%;
}
#divImage
{
display: none;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
background-color: White;
height: 300px;
width: 600px;
padding: 3px;
border: solid 1px black;
}
* html #divImage
{
position: absolute;
}
</style>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial"
OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="FileName" HeaderText="Image Name" />
<asp:TemplateField HeaderText="Preview Image">
<ItemTemplate>
<div>
<a href=''<%#DataBinder.Eval(Container.DataItem,"TITLE") %>''>
<asp:Image ID="imgProdImage" runat="server" CssClass="product" ImageUrl=''<%#DataBinder.Eval(Container.DataItem,"FilePath") %>''
ToolTip=''<%#DataBinder.Eval(Container.DataItem,"Filename") %>'' />
</a>
</div>
<%-- <asp:Image ID="Image1" runat="server" ImageUrl=''<%# Eval("")%>'' Height="82px" Width="108px"/>--%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
actuaaly i forgot to put div tag which is putting after gridview in the .aspx page
div is
<div id="divBackground">
<div id="divImage">
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center">
<img id="imgLoader" alt="" src="images/loader.gif" />
<img id="imgFull" runat="server" alt="" src="" style="display: none; height:700px;
width: 590px" />
</td>
</tr>
<%--<tr>
<td align="center" valign="bottom">
<%--<input id="btnClose" type="button" value="close" onclick="HideDiv()" />
</td> </tr>--%>
</table> </div> </div>
.cs page
bind info to grid and after that create row data bound..
like this
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
foreach (GridViewRow row in GridView1.Rows)
{
Image imgProdImage = (Image)row.FindControl("imgProdImage");
if (imgProdImage != null)
{
imgProdImage.Attributes.Add("onmouseover", "LoadDiv(this.src)");
imgProdImage.Attributes.Add("onmouseout", " HideDiv()");
}
}
}
因此它不能很好地解决这个问题.
解决方案
看看 for that i have create coding like this but it''s not working properlyso plz help me in that prob.....
my aspx page
for example code
<script type="text/javascript"> function LoadDiv(url) { var img = new Image(); var bcgDiv = document.getElementById("divBackground"); var imgDiv = document.getElementById("divImage"); var imgFull = document.getElementById("imgFull"); var imgLoader = document.getElementById("imgLoader"); imgLoader.style.display = "block"; img.onload = function() { imgFull.src = img.src; imgFull.style.display = "block"; imgLoader.style.display = "none"; }; img.src = url; var width = document.body.clientWidth; if (document.body.clientHeight > document.body.scrollHeight) { bcgDiv.style.height = document.body.clientHeight + "px"; } else { bcgDiv.style.height = document.body.scrollHeight + "px"; } imgDiv.style.left = (width - 650) / 2 + "px"; imgDiv.style.top = "20px"; bcgDiv.style.width = "100%"; bcgDiv.style.display = "block"; imgDiv.style.display = "block"; return false; } function HideDiv() { var bcgDiv = document.getElementById("divBackground"); var imgDiv = document.getElementById("divImage"); var imgFull = document.getElementById("imgFull"); if (bcgDiv != null) { bcgDiv.style.display = "none"; imgDiv.style.display = "none"; imgFull.style.display = "none"; } } </script> <style type="text/css"> body { margin: 0; padding: 0; height: 100%; overflow-y: auto; } .modal { display: none; position: absolute; top: 0px; left: 0px; background-color: black; z-index: 100; opacity: 0.8; filter: alpha(opacity=60); -moz-opacity: 0.8; min-height: 100%; } #divImage { display: none; z-index: 1000; position: fixed; top: 0; left: 0; background-color: White; height: 300px; width: 600px; padding: 3px; border: solid 1px black; } * html #divImage { position: absolute; } </style> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial" OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="FileName" HeaderText="Image Name" /> <asp:TemplateField HeaderText="Preview Image"> <ItemTemplate> <div> <a href=''<%#DataBinder.Eval(Container.DataItem,"TITLE") %>''> <asp:Image ID="imgProdImage" runat="server" CssClass="product" ImageUrl=''<%#DataBinder.Eval(Container.DataItem,"FilePath") %>'' ToolTip=''<%#DataBinder.Eval(Container.DataItem,"Filename") %>'' /> </a> </div> <%-- <asp:Image ID="Image1" runat="server" ImageUrl=''<%# Eval("")%>'' Height="82px" Width="108px"/>--%> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> actuaaly i forgot to put div tag which is putting after gridview in the .aspx page div is <div id="divBackground"> <div id="divImage"> <table style="height: 100%; width: 100%"> <tr> <td valign="middle" align="center"> <img id="imgLoader" alt="" src="images/loader.gif" /> <img id="imgFull" runat="server" alt="" src="" style="display: none; height:700px; width: 590px" /> </td> </tr> <%--<tr> <td align="center" valign="bottom"> <%--<input id="btnClose" type="button" value="close" onclick="HideDiv()" /> </td> </tr>--%> </table> </div> </div> .cs page bind info to grid and after that create row data bound.. like this protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { foreach (GridViewRow row in GridView1.Rows) { Image imgProdImage = (Image)row.FindControl("imgProdImage"); if (imgProdImage != null) { imgProdImage.Attributes.Add("onmouseover", "LoadDiv(this.src)"); imgProdImage.Attributes.Add("onmouseout", " HideDiv()"); } } }
so its not working well plz help me in this matter解决方案take a look at http://fancybox.net/
这篇关于想要在其中的图像上使用鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
