请教一个asp.net、javascript、css混合性问题
<%@Import Namespace="System.Data"%>
<%@Import Namespace="System.Data.Sqlclient"%>
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="utf-8" %>
<script runat="server" language="vb">
Sub page_load()
Dim con as sqlconnection
Dim cmd as sqlcommand
Dim strcmd as string
con=new sqlconnection(ConfigurationSettings.Appsettings("product"))
himg.imageurl=request("pic")
strcmd="select top 10 * from pics where gid=" & request("itid")
cmd=new sqlcommand(strcmd,con)
con.open()
dgcheckbox.datasource=cmd.executereader()
dgcheckbox.databind()
con.close()
End sub
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" defer="false">
//browser detection
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
&& (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
</script>
<script language="JavaScript">
//tooltip Position
var offsetX = 0;
var offsetY = 5;
var opacity = 100;
var toolTipSTYLE;
var name="mode";
parent.ct.style.display='none';
function initToolTips(){
if(document.getElementById){
toolTipSTYLE = document.getElementById("toolTipLayer").style;
}
if(is_ie || is_nav6up)
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
document.onmousemove = moveToMousePos;
}
}
function moveToMousePos(e)
{
if(!is_ie){
x = e.pageX;
y = e.pageY;
}else{
x = 590;
y = 28;
}
toolTipSTYLE.left = x + offsetX+'px';
toolTipSTYLE.top = y + offsetY+'px';
return true;
}
function toolTip(msg, fg, bg)
{
if(toolTip.arguments.length < 1) // if no arguments are passed then hide the tootip
{
if(is_nav4)
toolTipSTYLE.visibility = "hidden";
else
toolTipSTYLE.display = "none";
}
else // show
{
if(!fg) fg = "#777777";
if(!bg) bg = "#ffffe5";
var content = '<table border="0" cellspacing="0" cellpadding="0" class="toolTip"><tr><td bgcolor="' + fg + '">' +
'<table border="0" cellspacing="0" cellpadding="0"<tr><td bgcolor="' + bg + '">'+
'<font face="sans-serif" color="' + fg + '" size="-2">' + msg +
'</font></td></tr></table>'+
'</td></tr></table>';
if(is_nav4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
else if(is_ie || is_nav6up)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
}
}
function show(msg,msg1,msg2,msg3){
s = '<table width="100%" cellspacing="0" cellpadding="0">';
s += '<tr><td border="0" style="font-size:12px;text-align:right;background-color:black;color:white;"><b>'+ msg1 + '</b></td></tr>';
s += '<tr><td border="0" style="text-align:right;background-color:black;color:white;"> </td></tr>';
s += '<tr><td border="0" style="text-align:right;background-color:black;color:white;"><b>'+ msg2 + '</b></td></tr>';
s += '<tr><td border="0" style="text-align:right;background-color:black;color:white;"> </td></tr>';
s += '<tr><td border="0" style="text-align:right;background-color:black;color:white;"><b>'+ msg3 + '</b></td></tr>';
s += '<tr><td border="0" style="text-align:right;background-color:black;color:white;"> </td></tr>';
s += '<tr><td><img src="images/' + msg + '" border="0" width="225"/></td></tr>';
s += '</table>'
toolTip(s)
}
//--></script>
<style>
table{BORDER-COLLAPSE:COLLAPSE;}
td{
overflow:hidden;
word-wrap:break-word;
}
img{
border:0px;
}
.Text{
font-family: Verdana, Arial, Sans-serif, 'Times New Roman';
font-size: 8pt;
font-weight: normal;
font-style: normal;
color: #333333;
text-decoration: none;
}
.toolTip {
font-family: Verdana, Arial, Sans-serif, 'Times New Roman';
font-size: 8pt;
filter:alpha(opacity=90);
-moz-opacity: 0.8;
opacity: 0.8;
/* comment the above 3 line if you don't want transparency*/
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body onLoad="initToolTips();" style="font-size:12px;background-color:black;">
<script language=JavaScript src="js/js.js"></script>
<form runat="server">
<div id="toolTipLayer" style="position:absolute;visibility:visible;left:0;right:0"></div>
<div style="width:220px;height:337px;float:left;">
<asp:image id="himg" runat="server" width="220px" height="334" style="width:220px;heihgt:280px;margin-top:3px;margin-left:3px;"/>
</div>
<div style="width:290px;float:left;height:330px;margin-left:10px;">
<div style="margin-top:185px;color:white;margin-left:6px;">Click to see Detail picture</div>
<asp:Datalist id="dgcheckbox" EnableViewState="false" RepeatDirection="Vertical" style="font-size:12px;word-break:break-all;" RepeatColumns="5" runat="server" ItemStyle-width="60px">
<ItemTemplate>
<a onClick="show('<%#Container.DataItem("pic")%>','<%#Container.DataItem("pname")%>','<%#Container.DataItem("mat")%>','<%#Container.DataItem("description")%>')" id="itimg<%# Container.ItemIndex+1%>"><image src='<%#"images/"+Container.DataItem("pic")%>' style="cursor:pointer;width:60px;height:60px;border:1px solid #cccccc;margin-left:6px;margin-top:4px;"/></a>
</ItemTemplate>
</asp:Datalist>
</div>
<div style="width:296px;float:left;height:330px;">
<div style="text-align:right;width:296px;"><a onClick="history.back(-1);parent.ct.style.display=''" style="cursor:hand;"><img src="images/close.jpg"/></a></div>
</div>
</form>
<script language="javascript">
initToolTips();
toolTipSTYLE.left='590px';
toolTipSTYLE.top='28px';
toolTipSTYLE.visibility="visible";
toolTipSTYLE.display="block";
var btnObj=document.getElementById("itimg1");
btnObj.click();
</script>
</body>
</html>