急死我了,大家帮个忙啊 。。。。。。。
请问如何实现鼠标移到datagrid的某一列时,浮出一张对应的图片?..
项目急啊,大家帮个忙,谢谢了。。。。。。
[解决办法]
<head>
<!--定义显示和关闭图片的函数-->
<script language= "javascript ">
<!--
function showPic(e,id)
{
var cen = document.getElementById( "my_cen ");
cen.style.display = " ";
cen.style.top = parseInt(e.offsetTop)+80;
cen.style.left= parseInt(e.offsetLeft)+190;
document.getElementById( "my_pic ").src = "../EmployeePictrue/ "+id.toString()+ ".JPG ";
}
function closePic()
{
document.getElementById( "my_cen ").style.display = "none ";
}
//-->
</script>
</head>
<!--放一个隐藏的div用于显示图片-->
<body>
<div id= "my_cen " style= "width:200px;height:200px;text-align:center;display:none;position:absolute; ">
<img id= "my_pic " />
</div>
...
<!--在DataGrid的Item中添加js-->
...
<span style= "color:red;cursor:pointer; " onmouseover= 'showPic(this, <%# Eval( "employee_id ").ToString() %> ); ' onmouseout= "closePic(); "> [相片] </span>
...
[解决办法]
<HTML>
<HEAD>
<title> WebForm3 </title>
<meta content= "Microsoft Visual Studio .NET 7.1 " name= "GENERATOR ">
<meta content= "C# " name= "CODE_LANGUAGE ">
<meta content= "JavaScript " name= "vs_defaultClientScript ">
<meta content= "http://schemas.microsoft.com/intellisense/ie5 " name= "vs_targetSchema ">
<script>
function show(o)
{
var m=document.getElementById( "m ")
m.style.pixelLeft=getL(o)
m.style.pixelTop=getT(o)+o.offsetHeight
m.style.visibility= ' '
}
function hide()
{
document.getElementById( "m ").style.visibility= 'hidden '
}
function getL(e)
{
var l = e.offsetLeft;
while(e=e.offsetParent)
{
l += e.offsetLeft;
}
return l;
}
function getT(e)
{
var t=e.offsetTop;
while(e=e.offsetParent)
{
t+=e.offsetTop;
}
return t;
}
</script>
</HEAD>
<body ms_positioning= "GridLayout ">
<form id= "products_form " runat= "server ">
<asp:DataGrid id= "DataGrid1 " style= "Z-INDEX: 101; LEFT: 304px; POSITION: absolute; TOP: 128px "
runat= "server " AutoGenerateColumns= "False " Width= "496px ">
<Columns>
<asp:TemplateColumn HeaderText= "username ">
<ItemTemplate>
<asp:Label id= "i " onmouseover= "show(this) " onmouseout= "hide() " Runat= "server ">
<%#DataBinder.Eval(Container.DataItem, "FProjectCode ")%>
</asp:Label>
<DIV id= "m " onmouseover= "show(i) " style= "BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 20px; BORDER-TOP: black 1px solid; PADDING-LEFT: 20px; Z-INDEX: 100; VISIBILITY: hidden; PADDING-BOTTOM: 20px; BORDER-LEFT: black 1px solid; WIDTH: 80px; PADDING-TOP: 20px; BORDER-BOTTOM: black 1px solid; POSITION: absolute "
onmouseout= "hide() "> <IMG src= "meng.jpg "> </IMG>
</DIV>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
</body>
</HTML>
[解决办法]
<style type= "text/css "> .transparent {
BORDER-RIGHT: indianred 1px solid; BORDER-TOP: indianred 1px solid; DISPLAY: none; FILTER: alpha(opacity=85); BORDER-LEFT: indianred 1px solid; BORDER-BOTTOM: indianred 1px solid; POSITION: absolute; BACKGROUND-COLOR: infobackground
}
</style>
<script language= "JavaScript ">
function DisplayImage(imagename)
{
var ImageDiv = document.getElementById( 'ImageDiv ');
ImageDiv.src=imagename.value;
var content = document.getElementById( 'contentDiv ');
content.innerHTML= "图片 ";
showDiv( 'block ');
ImageDiv.style.display= 'block ';
}
function showDiv(show)
{
var div= document.getElementById( 'processDiv ');
x =event.clientX + document.body.scrollLeft;
y =event.clientY + document.body.scrollTop + 20;
div.style.display=show;
div.style.left = x;
div.style.top = y;
var ImageDiv= document.getElementById( 'ImageDiv ');
ImageDiv.style.display= 'none ';
}
function Hide()
{
Popup.style.display= "none ";
}
</script>
<div class= "transparent " id= "processDiv ">
<div style= "BACKGROUND-COLOR: indianred " align= "center "> <A onclick= "showDiv( 'none '); " href= "# "> <strong> <font color= "#ff9900 "> 关闭 </font> </strong> </A> </div>
<div id= "contentDiv " style= "BACKGROUND-COLOR: #00ccff "> </div>
<div> <img id= 'ImageDIV ' style= "BORDER-RIGHT:green 1px solid;BORDER-TOP:green 1px solid;FILTER:revealTrans(duration=1,transition=23);BORDER-LEFT:green 1px solid;WIDTH:266px;BORDER-BOTTOM:green 1px solid;HEIGHT:220px;display: 'none '; "
onclick= "window.open(this.src); ">
</div>
</div>
private void grid_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if(e.Item.ItemIndex> =0)
{
e.Item.Attributes.Add( "onMouseOver ", "DisplayImage( ' "+图片名称+ " '); ");
}
}
[解决办法]
try this:
<span style= "color:red;cursor:pointer; " onmouseover= 'showPic(this, <%# DataBinder.Eval(Container.DataItem, "pic ", " '{0} ' ").ToString() %> ); ' onmouseout= "closePic(); "> </span>