隋国明-手机版个人主页

网页编程－关于ALT的几种显示方式

<SCRIPT>
//***********默认设置定义.*********************
tPopWait=100;//停留tWait豪秒后显示提示。
tPopShow=4000;//显示tShow豪秒后关闭提示
showPopStep=10;
popOpacity=100;

//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;

document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText {  background-color: #FFFFCC; border: 1px #000000 solid; font-size: 12px; padding-right: 2px; padding-left: 2px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");

function showIt(){
		dypopLayer.className=popStyle;
		dypopLayer.innerHTML=sPop;
		popWidth=dypopLayer.clientWidth;
		popHeight=dypopLayer.clientHeight;
		if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
			else popLeftAdjust=0;
		if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
			else popTopAdjust=0;
		dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
		dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
		dypopLayer.style.filter="Alpha(Opacity=0)";
		fadeOut();
}

function fadeIn(){
	if(dypopLayer.filters.Alpha.opacity>0) {
		dypopLayer.filters.Alpha.opacity-=1;
		tFadeIn=setTimeout("fadeIn()",1);
		}
}
document.onmouseover=showPopupText;

</SCRIPT>

<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>.sm12px {
	FONT-SIZE: 12px
}
.cPopText {
	BACKGROUND-COLOR: #99ccff; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.green {
	BACKGROUND-COLOR: #ccffcc; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.red {
	BACKGROUND-COLOR: #ff6666; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.yellow {
	BACKGROUND-COLOR: #ffff99; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.purple {
	BACKGROUND-COLOR: #cc99ff; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
.marqgreen {
	BACKGROUND-COLOR: #ccffcc; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px; WIDTH: 100px
}
.hello {
	BACKGROUND-IMAGE: url(dia.gif); BACKGROUND-REPEAT: no-repeat; FONT-SIZE: 12px; HEIGHT: 35px; PADDING-BOTTOM: 4px; PADDING-TOP: 10px; WIDTH: 89px
}
</STYLE>

<META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff leftMargin=0 text=#000000 topMargin=0 marginheight="0" 
marginwidth="0">
<TABLE align=center border=0 cellPadding=0 cellSpacing=0 class=sm12px height=270 
width=600>
  <TBODY>
  <TR>
    <TD colSpan=2 height=41>
      <HR>
    </TD></TR>
  <TR>
    <TD colSpan=2 height=63>
提示框风格<FONT color=#ff3300 
      dypop="Cascading Style Sheets">式样表</FONT><BR>.cPopText { font-size: 12px; 
      background-color: #CCFFCC; padding-top: 2px; padding-right: 2px; 
      padding-bottom: 2px; padding-left: 2px; border:1px solid #000000;}</P>
      <P><BR></P></TD></TR>
  <TR bgColor=#e6ffe6>
    <TD width="76%"><BR>使用cPopText整体风格<BR>&lt;img src="sq02.gif" width="33" 
      height="25" alt="绿色主题"&gt; </TD>
    <TD width="24%"><IMG alt=绿色主题 height=25 src="images/sq02.gif" 
      width=33><IMG alt=黄色主题 height=25 src="images/sq03.gif" width=33><IMG 
      alt=红色主题 height=25 src="images/sq04.gif" width=33><IMG alt=紫色主题 
      height=25 src="images/sq05.gif" width=33></TD></TR>
  <TR bgColor=#ffffcc>
    <TD width="76%"><BR>在标记内加入dyclass属性设置个别提示风格<BR>&lt;img src="sq02.gif" 
      width="33" height="25" dypop="绿色主题" dyclass="green"&gt;</TD>
    <TD width="24%"><IMG height=25 src="images/sq02.gif" width=33 
      dypop="绿色主题" dyclass="green"><IMG height=25 src="images/sq03.gif" 
      width=33 dypop="黄色主题" dyclass="yellow"><IMG height=25 
      src="images/sq04.gif" width=33 dypop="红色主题....................." 
      dyclass="red"><IMG alt=purple!purple!purple................ height=25 
      src="images/sq05.gif" width=33 dyclass="purple"></TD></TR>
  <TR>
    <TD colSpan=2 height=122><FONT size=5 dypop="<center>Hello!<center>" 
      dyclass="hello">HELLO!</FONT> 
      <P><IMG height=25 src="images/sq02.gif" width=33 dypop="<B>绿色主题</B>" 
      dyclass="green"><IMG height=25 src="images/sq03.gif" width=33 
      dypop="<I>黄色主题</I>" dyclass="yellow"><IMG height=25 
      src="images/sq02.gif" width=33 dypop="<marquee >绿色主题绿色主题绿色主题绿色主题绿色主题绿色主题绿色主题绿色主题绿色主题</marquee>" 
      dyclass="marqgreen"><IMG height=25 src="images/sq03.gif" width=33 
      dypop="<img src='go01.gif' width='16' height='16'>黄色主题" 
      dyclass="yellow"></P>
      <DIV id=Layer1 
      style="BACKGROUND-COLOR: #cc6600; BORDER-BOTTOM: #000000 1px; BORDER-LEFT: #000000 1px; BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; HEIGHT: 25px; POSITION: absolute; WIDTH: 104px; Z-INDEX: 1; layer-background-color: #CC6600" 
      dypop="This is a Layer.">支持更多的标记。<BR>&lt;div&gt;&lt;span&gt;&lt;td&gt;<BR>&lt;font&gt;&lt;B&gt; 
      </DIV>
      <P>&nbsp;</P></TD></TR>
  <TR>
    <TD colSpan=2 height=57>
      <TABLE border=1 cellPadding=0 cellSpacing=0 width=90>
        <TBODY>
        <TR>
          <TD dypop="This is a TD">&nbsp;</TD></TR>
        <TR>
          <TD dypop="This is TD2">&nbsp;</TD></TR></TBODY></TABLE></TD></TR>
  <TR>
    <TD colSpan=2 height=24>&nbsp;</TD></TR></TBODY></TABLE></BODY></HTML>