1.建立一aspx页面,html代码
<html>
<head>
<title>WebForm1</title>
<style type="text/css">.logo { POSITION: absolute }.dek { Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute }</style>
</head>
<body>
<Form runat="server">
<DIV class="dek" id="dek"></DIV>
<script language="javascript">
Xoffset=-20;
Yoffset= 20;
var nav,yyy=-1000;
var skn=dek.style;
document.onmousemove=get_mouse;
//ajax
var xmlHttp;
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(id)
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "?ID="+id, true);
xmlHttp.send(null);
}
var content;
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
content=xmlHttp.responseText;
}
}
}
//tooltip
function popup(id)
{
startRequest(id);
yyy=Yoffset;
document.all("dek").innerHTML=content;
skn.visibility="visible"
}
function get_mouse(e)
{
var x=event.x+document.body.scrollLeft;
skn.left=x+Xoffset;
var y=event.y+document.body.scrollTop;
skn.top=y+yyy;
}
function kill()
{
yyy=-1000;
skn.visibility="hidden";
}
</script>
<div>
<asp:FileUpload ID="FileUpload1" runat="server" /><br>名称:<asp:TextBox ID="txtUserName"
runat="server"></asp:TextBox><br>
描述:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="保存" />
<asp:DataList id="DataList1"
BorderColor="black"
CellPadding="1"
CellSpacing="4" HorizontalAlign="Center"
RepeatColumns="4"
RepeatLayout="Table"
runat="server" ShowFooter="true" ShowHeader="true"
width="100%">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "UserName")%><br>
<img ID="img1" onmouseover="popup(<%# DataBinder.Eval(Container.DataItem, "UserID")%>);" onmouseout="kill();" src='<%# DataBinder.Eval(Container.DataItem, "Path") %>' height='150'/>
</ItemTemplate>
</asp:DataList>
</div>
</Form>
</body>
</html>
2.cs代码<head>
<title>WebForm1</title>
<style type="text/css">.logo { POSITION: absolute }.dek { Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute }</style>
</head>
<body>
<Form runat="server">
<DIV class="dek" id="dek"></DIV>
<script language="javascript">
Xoffset=-20;
Yoffset= 20;
var nav,yyy=-1000;
var skn=dek.style;
document.onmousemove=get_mouse;
//ajax
var xmlHttp;
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(id)
{
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "?ID="+id, true);
xmlHttp.send(null);
}
var content;
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
content=xmlHttp.responseText;
}
}
}
//tooltip
function popup(id)
{
startRequest(id);
yyy=Yoffset;
document.all("dek").innerHTML=content;
skn.visibility="visible"
}
function get_mouse(e)
{
var x=event.x+document.body.scrollLeft;
skn.left=x+Xoffset;
var y=event.y+document.body.scrollTop;
skn.top=y+yyy;
}
function kill()
{
yyy=-1000;
skn.visibility="hidden";
}
</script>
<div>
<asp:FileUpload ID="FileUpload1" runat="server" /><br>名称:<asp:TextBox ID="txtUserName"
runat="server"></asp:TextBox><br>
描述:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br>
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="保存" />
<asp:DataList id="DataList1"
BorderColor="black"
CellPadding="1"
CellSpacing="4" HorizontalAlign="Center"
RepeatColumns="4"
RepeatLayout="Table"
runat="server" ShowFooter="true" ShowHeader="true"
width="100%">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "UserName")%><br>
<img ID="img1" onmouseover="popup(<%# DataBinder.Eval(Container.DataItem, "UserID")%>);" onmouseout="kill();" src='<%# DataBinder.Eval(Container.DataItem, "Path") %>' height='150'/>
</ItemTemplate>
</asp:DataList>
</div>
</Form>
</body>
</html>
using System.Data.SqlClient;
using System.IO;
using System.IO;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindData();
}
if (ID != "")
{
GetDescriptionByID(ID);
}
}
property
GetDescriptionByID
save image
BindData
GetDataSet
3.数据库脚本{
if (!Page.IsPostBack)
{
BindData();
}
if (ID != "")
{
GetDescriptionByID(ID);
}
}
property
GetDescriptionByID
save image
BindData
GetDataSet
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[TestImage]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[TestImage]
GO
CREATE TABLE [dbo].[TestImage] (
[UserID] [int] IDENTITY (1, 1) NOT NULL ,
[UserName] [nvarchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
[Image] [image] NULL ,
[Path] [nvarchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
[Type] [nvarchar] (20) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[Description] [nvarchar] (2000) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
drop table [dbo].[TestImage]
GO
CREATE TABLE [dbo].[TestImage] (
[UserID] [int] IDENTITY (1, 1) NOT NULL ,
[UserName] [nvarchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
[Image] [image] NULL ,
[Path] [nvarchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
[Type] [nvarchar] (20) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[Description] [nvarchar] (2000) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO