说明框的各种用法

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

// 下面为浏览器的检测
if (ie4) {
if (navigator.userAgent.indexOf('MSIE 5')>0) {
ie5 = true;
} else {
ie5 = false; }
} else {
ie5 = false;
}

var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
var tr = 1;
if ( (ns4) || (ie4) ) {
if (ns4) over = document.overDiv
if (ie4) over = overDiv.style
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}

// 下面为具体使用的一些函数定义，共分三种方式

// 第一种方式说明框在右边的情况
function drs(text) {
dts(1,text);
}

// 第二种方式说明框在右边的情况
function drc(text, title) {
dtc(1,text,title);
}

// 第三种方式说明框在右边的情况
function src(text,title) {
stc(1,text,title);
}

// 第一种方式说明框在左边的情况
function dls(text) {
dts(0,text);
}

// 第二种方式说明框在左边的情况
function dlc(text, title) {
dtc(0,text,title);
}

// 第三种方式说明框在左边的情况
function slc(text,title) {
stc(0,text,title);
}

// 第一种方式说明框在中间的情况
function dcs(text) {
dts(2,text);
}

// 第二种方式说明框在中间的情况
function dcc(text, title) {
dtc(2,text,title);
}

// 第三种方式说明框在中间的情况
function scc(text,title) {
stc(2,text,title);
}

//恢复正常状态的函数
function nd() {
if ( cnt >= 1 ) { sw = 0 };
if ( (ns4) || (ie4) ) {
if ( sw == 0 ) {
snow = 0;
hideObject(over);
} else {
cnt++;
}
}
}

// 第一种方式的<table>设置
function dts(d,text) {
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><FONT FACE=\"Arial,Helvetica\" COLOR=\""+textcolor+"\" SIZE=\"-2\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
}

// 第二种方式的<table>设置
function dtc(d,text, title) {
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
}

// 第三种方式的<table>设置
function stc(d,text, title) {
sw = 1;
cnt = 0;
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=\""+backcolor+"\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><SPAN ID=\"PTT\"><B><FONT COLOR=\""+capcolor+"\">"+title+"</FONT></B></SPAN></TD><TD ALIGN=RIGHT><A HREF=\"/\" onMouseOver=\"cClick();\" ID=\"PCL\"><FONT COLOR=\""+closecolor+"\">Close</FONT></A></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\""+fcolor+"\"><TR><TD><SPAN ID=\"PST\"><FONT COLOR=\""+textcolor+"\">"+text+"</FONT><SPAN></TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
snow = 0;
}

// 具体设置在哪边出现说明框
function disp() {
if ( (ns4) || (ie4) ) {
if (snow == 0) {
if (dir == 2) { // 中间
moveTo(over,x+offsetx-(width/2),y+offsety);
}
if (dir == 1) { // 右边
moveTo(over,x+offsetx,y+offsety);
}
if (dir == 0) { // 左边
moveTo(over,x-offsetx-width,y+offsety);
}
showObject(over);
snow = 1;
}
}

}

// 移动说明层
function mouseMove(e) {
if (ns4) {x=e.pageX; y=e.pageY;}
if (ie4) {x=event.x; y=event.y;}
if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
if (snow) {
if (dir == 2) { // 中间
moveTo(over,x+offsetx-(width/2),y+offsety);
}
if (dir == 1) { // 右边
moveTo(over,x+offsetx,y+offsety);
}
if (dir == 0) { // 左边
moveTo(over,x-offsetx-width,y+offsety);
}
}
}

function cClick() {
hideObject(over);
sw=0;
}

// 设置一个层
function layerWrite(txt) {
if (ns4) {
var lyr = document.overDiv.document
lyr.write(txt)
lyr.close()
}
else if (ie4) document.all["overDiv"].innerHTML = txt
if (tr) { trk(); }
}

// 设置层显示的部分
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}

// 隐藏的部分
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}

// 可移动的部分
function moveTo(obj,xL,yL) {
obj.left = xL
obj.top = yL
}

function trk() {

tr = 0;
}
</SCRIPT>
//下面是具体的文字链接，启动相关函数是用的onMouseOver和onMouseOut事件
<A HREF="http://www.jzzy.com" onMouseOver="dls('在左边的简单说明.'); return true;" onMouseOut="nd(); return true;">说明在左</A><BR>
<A HREF="http://www.jzzy.com" onClick="src('在右边的简单说明-www.jzzy.com','详细资料'); return false;" onMouseOver="drs('在左边的简单说明---你可以点击一下'); return true;" onMouseOut="nd(); return true;">说明在右</A><BR>
<A HREF="http://www.jzzy.com" onMouseOver="dlc('在左边的双层说明!','详细资料'); return true;" onMouseOut="nd(); return true;">双层说明在左</A><BR>
<A HREF="http://www.jzzy.com" onMouseOver="drc('在左边的双层说明.','详细资料'); return true;" onMouseOut="nd(); return true;">双层说明在右</A><BR>
<A HREF="http://www.jzzy.com" onMouseOver="dcc('双层说明居中.','详细资料'); return true;" onMouseOut="nd(); return true;">双层说明居中</A>