说明框的各种用法

【 tulaoshi.com - Web开发 】

一、请先看一下演示:

说明在左
说明在右
双层说明在左
双层说明在右
双层说明居中 
以下是具体的说明：

DIV ID="overDiv" STYLE="position:absolute; visibility:hide;"/DIV
//定义一个div，后面会用的着
SCRIPT TYPE="" LANGUAGE="JavaScript"
!--
var width = "250"; //定义说明框的宽度
var border = "3"; //定义说明框表格边框的大小
var offsetx = 2; //定义说明框离文字链接的水平值
var offsety = 2; //定义说明框离文字链接的上下值

var fcolor = "#CCFFCC";
var backcolor = "#339933";
var textcolor = "#000000";
var capcolor = "#FFFFFF";
//以上是定义一些相关的颜色

// --
/SCRIPT
//上面的这些内容也可以去掉，它只是事先给出了颜色定义等，下面还是会定义的，这里只是给出默认值。
SCRIPT LANGUAGE="JavaScript"
if (typeof fcolor == 'undefined') { var fcolor = "#CCCCFF";}

// 设置如果没有定义背景色后会出现的颜色
if (typeof backcolor == 'undefined') { var backcolor = "#333399";}

// 设置如果没有定义文字颜色后会出现的颜色
if (typeof textcolor == 'undefined') { var textcolor = "#000000";}

// 设置如果没有定义说明表格上层文字颜色后会出现的颜色
if (typeof capcolor == 'undefined') { var capcolor = "#FFFFFF";}

// 设置如果没有定义第三种说明框后会出现的颜色
if (typeof closecolor == 'undefined') { var closecolor = "#9999FF";}

// 定义说明框表格的宽度(如事先未定义的值)
if (typeof width == 'undefined') { var width = "200";}

// 定义说明框表格边框的宽度(如事先未定义的值)
if (typeof border == 'undefined') { var border = "1";}

// 定义说明框离文字链接的水平距离(如事先未定义的值)
if (typeof offsetx == 'undefined') { var offsetx = 10;}

// 定义说明框离文字链接的上下距离(如事先未定义的值)
if (typeof offsety == 'undefined') { var offsety = 10;}

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+""TRTDTABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=""+fcolor+""TRTDFONT 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+""TRTDTABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0TRTDSPAN ID="PTT"BFONT COLOR=""+capcolor+"""+title+"/FONT/B/SPAN/TD/TR/TABLETABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=""+fcolor+""TRTDSPAN ID="PST"FONT COLOR=""+textcolor+"""+text+"/FONTSPAN/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+""TRTDTABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0TRTDSPAN ID="PTT"BFONT COLOR=""+capcolor+"""+title+"/FONT/B/SPAN/TDTD ALIGN=RIGHTA HREF="/" onMouseOver="cClick();" ID="PCL"FONT COLOR=""+closecolor+""Close/FONT/A/TD/TR/TABLETABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=""+fcolor+""TRTDSPAN ID="PST"FONT COLOR=""+textcolor+"""+text+"/FONTSPAN/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;"说明在左/ABR
A HREF="http://www.jzzy.com" onClick="src('在右边的简单说明-www.jzzy.com','详细资料'); return false;" onMouseOver="drs('在左边的简单说明---你可以点击一下'); return true;" onMouseOut="nd(); return true;"说明在右/ABR
A HREF="http://www.jzzy.com" onMouseOver="dlc('在左边的双层说明!','详细资料'); return true;" onMouseOut="nd(); return true;"双层说明在左/ABR
A HREF="http://www.jzzy.com" onMouseOver="drc('在左边的双层说明.','详细资料'); return true;" onMouseOut="nd(); return true;"双层说明在右/ABR
A HREF="http://www.jzzy.com" onMouseOver="dcc('双层说明居中.','详细资料'); return true;" onMouseOut="nd(); return true;"双层说明居中/A

二、还有两种很简单的情况，分别用title和alt实现：
1，alt一般用在图片的说明上：演示：
说明源码：img src=search,gif alt="这是用alt实现的说明"

2，鼠标放上去看看title的情况演示
说明源码：font title="这是用title实现的说明，而且title的使用非常灵活，在许多地方都可以使用"鼠标放上去看看title的情况font color=red演示/font/font