风舞残阳 2008-4-1 11:21
说明框的各种用法
一、请先看一下演示:
说明在左
说明在右
双层说明在左
双层说明在右
双层说明居中
以下是具体的说明：
%26lt;DIVID="overDiv"STYLE="position:absolute;visibility:hide;"%26gt;%26lt;/DIV%26gt;
//定义一个%26lt;div%26gt;，后面会用的着
%26lt;SCRIPTTYPE=""LANGUAGE="JavaScript"%26gt;
%26lt;!--
varwidth="250";//定义说明框的宽度
varborder="3";//定义说明框表格边框的大小
varoffsetx=2;//定义说明框离文字链接的水平值
varoffsety=2;//定义说明框离文字链接的上下值
varfcolor="#CCFFCC";
varbackcolor="#339933";
vartextcolor="#000000";
varcapcolor="#FFFFFF";
//以上是定义一些相关的颜色
//--%26gt;
%26lt;/SCRIPT%26gt;
//上面的这些内容也可以去掉，它只是事先给出了颜色定义等，下面还是会定义的，这里只是给出默认值。
%26lt;SCRIPTLANGUAGE="JavaScript"%26gt;
if([wiki]type[/wiki]offcolor=='undefined'){varfcolor="#CCCCFF";}
//设置如果没有定义背景色后会出现的颜色
if(typeofbackcolor=='undefined'){varbackcolor="#333399";}
//设置如果没有定义文字颜色后会出现的颜色
if(typeoftextcolor=='undefined'){vartextcolor="#000000";}
//设置如果没有定义说明表格上层文字颜色后会出现的颜色
if(typeofcapcolor=='undefined'){varcapcolor="#FFFFFF";}
//设置如果没有定义第三种说明框后会出现的颜色
if(typeofclosecolor=='undefined'){varclosecolor="#9999FF";}
//定义说明框表格的宽度(如事先未定义的值)
if(typeofwidth=='undefined'){varwidth="200";}
//定义说明框表格边框的宽度(如事先未定义的值)
if(typeofborder=='undefined'){varborder="1";}
//定义说明框离文字链接的水平距离(如事先未定义的值)
if(typeofoffsetx=='undefined'){varoffsetx=10;}
//定义说明框离文字链接的上下距离(如事先未定义的值)
if(typeofoffsety=='undefined'){varoffsety=10;}
ns4=(document.layers)?true:false
ie4=(document.all)?true:false
//下面为[wiki]浏览器[/wiki]的检测
if(ie4){
if(navigator.userAgent.indexOf('MSIE5')%26gt;0){
ie5=true;
}else{
ie5=false;}
}else{
ie5=false;
}
varx=0;
vary=0;
varsnow=0;
varsw=0;
varcnt=0;
vardir=1;
vartr=1;
if((ns4)││(ie4)){
if(ns4)over=document.overDiv
if(ie4)over=overDiv.style
document.onmousemove=mouseMove
if(ns4)document.captureEvents(Event.MOUSEMOVE)
}
//下面为具体使用的一些函数定义，共分三种方式
//第一种方式说明框在右边的情况
functiondrs(text){
dts(1,text);
}
//第二种方式说明框在右边的情况
functiondrc(text,title){
dtc(1,text,title);
}
//第三种方式说明框在右边的情况
functionsrc(text,title){
stc(1,text,title);
}
//第一种方式说明框在左边的情况
functiondls(text){
dts(0,text);
}
//第二种方式说明框在左边的情况
functiondlc(text,title){
dtc(0,text,title);
}
//第三种方式说明框在左边的情况
functionslc(text,title){
stc(0,text,title);
}
//第一种方式说明框在中间的情况
functiondcs(text){
dts(2,text);
}
//第二种方式说明框在中间的情况
functiondcc(text,title){
dtc(2,text,title);
}
//第三种方式说明框在中间的情况
functionscc(text,title){
stc(2,text,title);
}
//恢复正常状态的函数
functionnd(){
if(cnt%26gt;=1){sw=0};
if((ns4)││(ie4)){
if(sw==0){
snow=0;
hideObject(over);
}else{
cnt++;
}
}
}
//第一种方式的%26lt;table%26gt;设置
functiondts(d,text){
txt="%26lt;TABLEWIDTH="+width+"BORDER=0CELLPADDING="+border+"CELLSPACING=0BGCOLOR=\""+backcolor+"\"%26gt;%26lt;TR%26gt;%26lt;TD%26gt;%26lt;TABLEWIDTH=100%BORDER=0CELLPADDING=2CELLSPACING=0BGCOLOR=\""+fcolor+"\"%26gt;%26lt;TR%26gt;%26lt;TD%26gt;%26lt;FONTFACE=\"Arial,Helvetica\"COLOR=\""+textcolor+"\"SIZE=\"-2\"%26gt;"+text+"%26lt;/FONT%26gt;%26lt;/TD%26gt;%26lt;/TR%26gt;%26lt;/TABLE%26gt;%26lt;/TD%26gt;%26lt;/TR%26gt;%26lt;/TABLE%26gt;"
layerWrite(txt);
dir=d;
disp();
}
//第二种方式的%26lt;table%26gt;设置
functiondtc(d,text,title){
txt="%26lt;TABLEWIDTH="+width+"BORDER=0CELLPADDING="+border+"CELLSPACING=0BGCOLOR=\""+backcolor+"\"%26gt;%26lt;TR%26gt;%26lt;TD%26gt;%26lt;TABLEWIDTH=100%BORDER=0CELLPADDING=0CELLSPACING=0%26gt;%26lt;TR%26gt;%26lt;TD%26gt;%26lt;SPANID=\"PTT\"%26gt;%26lt;B%26gt;%26lt;FONTCOLOR=\""+capcolor+"\"%26gt;"+title+"%26lt;/FONT%26gt;%26lt;/B%26gt;%26lt;/SPAN%26gt;%26lt;/TD%26gt;%26lt;/TR%26gt;%26lt;/TABLE%26gt;%26lt;TABLEWIDTH=100%BORDER=0CELLPADDING=2CELLSPACING=0BGCOLOR=\""+fcolor+"\"%26gt;%26lt;TR%26gt;%26lt;TD%26gt;%26lt;SPANID=\"PST\"%26gt;%26lt;FONTCOLOR=\""+textcolor+"\"%26gt;"+text+"%26lt;/FONT%26gt;%26lt;SPAN%26gt;%26lt;/TD%26gt;%26lt;/TR%26gt;%26lt;/TABLE%26gt;%26lt;/TD%26gt;%26lt;/TR%26gt;%26lt;/TABLE%26gt;"
layerWrite(txt);
dir=d;
disp();
}
//第三种方式的%26lt;table%26gt;设置
functionstc(d,text,title){
sw=1;
cnt=0;
txt="%26lt;TABLEWIDTH="+width+"BORDER=0CELLPADDING="+border+"CELLSPACING=0BGCOLOR=\""+backcolor+"\"%26gt;%26lt;TR%26gt;%26lt;TD%26gt;%26lt;TABLEWIDTH=100%BORDER=0CELLPADDING=0CELLSPACING=0%26gt;%26lt;TR%26gt;%26lt;TD%26gt;%26lt;SPANID=\"PTT\"%26gt;%26lt;B%26gt;%26lt;FONTCOLOR=\""+capcolor+"\"%26gt;"+title+"%26lt;/FONT%26gt;%26lt;/B%26gt;%26lt;/SPAN%26gt;%26lt;/TD%26gt;%26lt;TDALIGN=RIGHT%26gt;%26lt;AHREF=\"/\"onMouseOver=\"cClick();\"ID=\"PCL\"%26gt;%26lt;FONTCOLOR=\""+closecolor+"\"%26gt;Close%26lt;/FONT%26gt;%26lt;/A%26gt;%26lt;/TD%26gt;%26lt;/TR%26gt;%26lt;/TABLE%26gt;%26lt;TABLEWIDTH=100%BORDER=0CELLPADDING=2CELLSPACING=0BGCOLOR=\""+fcolor+"\"%26gt;%26lt;TR%26gt;%26lt;TD%26gt;%26lt;SPANID=\"PST\"%26gt;%26lt;FONTCOLOR=\""+textcolor+"\"%26gt;"+text+"%26lt;/FONT%26gt;%26lt;SPAN%26gt;%26lt;/TD%26gt;%26lt;/TR%26gt;%26lt;/TABLE%26gt;%26lt;/TD%26gt;%26lt;/TR%26gt;%26lt;/TABLE%26gt;"
layerWrite(txt);
dir=d;
disp();
snow=0;
}
//具体设置在哪边出现说明框
functiondisp(){
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;
}
}
}
//移动说明层
functionmouseMove(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);
}
}
}
functioncClick(){
hideObject(over);
sw=0;
}
//设置一个层
functionlayerWrite(txt){
if(ns4){
varlyr=document.overDiv.document
lyr.write(txt)
lyr.close()
}
elseif(ie4)document.all["overDiv"].innerHTML=txt
if(tr){trk();}
}
//设置层显示的部分
functionshowObject(obj){
if(ns4)obj.visibility="show"
elseif(ie4)obj.visibility="visible"
}
//隐藏的部分
functionhideObject(obj){
if(ns4)obj.visibility="hide"
elseif(ie4)obj.visibility="hidden"
}
//可移动的部分
functionmoveTo(obj,xL,yL){
obj.left=xL
obj.top=yL
}
functiontrk(){
tr=0;
}
%26lt;/SCRIPT%26gt;
//下面是具体的文字链接，启动相关函数是用的onMouseOver和onMouseOut事件
%26lt;AHREF="http://www.jzzy.com"onMouseOut="nd();returntrue;"%26gt;说明在左%26lt;/A%26gt;%26lt;BR%26gt;
%26lt;AHREF="http://www.jzzy.com"onMouseOut="nd();returntrue;"%26gt;说明在右%26lt;/A%26gt;%26lt;BR%26gt;
%26lt;AHREF="http://www.jzzy.com"onMouseOut="nd();returntrue;"%26gt;双层说明在左%26lt;/A%26gt;%26lt;BR%26gt;
%26lt;AHREF="http://www.jzzy.com"onMouseOut="nd();returntrue;"%26gt;双层说明在右%26lt;/A%26gt;%26lt;BR%26gt;
%26lt;AHREF="http://www.jzzy.com"onMouseOut="nd();returntrue;"%26gt;双层说明居中%26lt;/A%26gt;
二、还有两种很简单的情况，分别用title和alt实现：
1，alt一般用在图片的说明上：演示：
说明源码：%26lt;imgsrc=search,gifalt="这是用alt实现的说明"%26gt;
2，[wiki]鼠标[/wiki]放上去看看title的情况演示
说明源码：%26lt;fonttitle="这是用title实现的说明，而且title的使用非常灵活，在许多地方都可以使用"%26gt;鼠标放上去看看title的情况%26lt;fontcolor=red%26gt;演示%26lt;/font%26gt;%26lt;/font%26gt;
