javascript tooltip (网页的提示效果)

一个很不错的javascript网页提示效果的封装，个人认为style 7，8，9在实际情况最为实用

点这里看演示效果

点这里下载演示

详细分析，请阅读全文

 

 

引用

第一步
<script language="JavaScript1.2" src="js/main.js" type="text/javascript"></script>
将此写在head中

 

引用

第二步
<script language="JavaScript1.2" src="js/style.js" type="text/javascript"></script>
将此写在body中, 个人建议不用这种加载的形式，可把style.js解开直接写在页面中，这有一个好处就是，如果要实现动态的效果的时候可以从数据库直接读取，对其进行替换

 

view plaincopy to clipboardprint?
<script type="text/javascript">  
var FiltersEnabled = 1 // if your not going to use transitions or filters in any of the tips set this to 0  
 
Text[0]=["5dhome.net","Business planning software."]  
Text[1]=["","<b>SimplytheBest DHTML Scripts</b><br>A collection of the best DHTML script and Javascripts on the Web."]  
Text[2]=["Right","This box is right positioned."]  
Text[3]=["Center","This box is center positioned."]  
Text[4]=["Left","This box is left positioned."]  
Text[5]=["Float","This box is float positioned at a (10,10) coordinate, it also floats with the scrollbars so it is always static."]  
Text[6]=["Fixed","This box is fixed positioned at a (150,400) coordinate."]  
Text[7]=["Sticky style","This box will sticky around<br>This is useful when you want to insert a link like this <A href='http://www.5dhome.net'>PlanMagic</A>."]  
Text[8]=["Keep style","This sticks around the mouse."]  
Text[9]=["Left coordinate control","This box is right positioned with a 40 X coordinate."]  
Text[10]=["Top coordinate control","This box is right positioned with a 50 Y coordinate."]  
Text[11]=["Visual effects","This box has a Shadow and a bit of Transparency. It also has a random Transition effect applied to it."]  
Text[12]=["Different style","This has a whole new style!"]  
Text[13]=["","<b>PlanMagic Business Software:</b><ul><li>Business plan<li>Marketing plan<li>Financial plan<li>Construction plan<li>Bar business plan<li>Restaurant plan<li>Hotel business plan<li>Resort business plan</ul>"]  
 
 
Style[0]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,10,10,"","","","",""]  
Style[1]=["white","black","#cc0000","#FFCC99","","","","","","","center","","","",200,"",2,2,10,10,"","","","",""]  
Style[2]=["white","black","#cc0000","#FFCC99","","","","","","","left","","","",200,"",2,2,10,10,"","","","",""]  
Style[3]=["white","black","#cc0000","#FFCC99","","","","","","","float","","","",200,"",2,2,10,10,"","","","",""]  
Style[4]=["white","black","#cc0000","#FFCC99","","","","","","","fixed","","","",200,"",2,2,150,400,"","","","",""]  
Style[5]=["white","black","#cc0000","#FFCC99","","","","","","","","sticky","","",200,"",2,2,10,10,"","","","",""]  
Style[6]=["white","black","#cc0000","#FFCC99","","","","","","","","keep","","",200,"",2,2,10,10,"","","","",""]  
Style[7]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,40,10,"","","","",""]  
Style[8]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,10,50,"","","","",""]  
Style[9]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,10,10,51,0.5,75,"simple","gray"]  
Style[10]=["white","black","black","white","","","right","","Tahoma","cursive","center","",3,4,200,20,5,10,10,0,50,1,70,"complex","gray"]  
Style[11]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,10,10,51,0.5,45,"simple","gray"]  
Style[12]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,10,10,51,1,0,"",""]  
 
applyCssFilter()  
</script>  
<script type="text/javascript">
var FiltersEnabled = 1 // if your not going to use transitions or filters in any of the tips set this to 0

Text[0]=["5dhome.net","Business planning software."]
Text[1]=["","<b>SimplytheBest DHTML Scripts</b><br>A collection of the best DHTML script and Javascripts on the Web."]
Text[2]=["Right","This box is right positioned."]
Text[3]=["Center","This box is center positioned."]
Text[4]=["Left","This box is left positioned."]
Text[5]=["Float","This box is float positioned at a (10,10) coordinate, it also floats with the scrollbars so it is always static."]
Text[6]=["Fixed","This box is fixed positioned at a (150,400) coordinate."]
Text[7]=["Sticky style","This box will sticky around<br>This is useful when you want to insert a link like this <A href='http://www.5dhome.net'>PlanMagic</A>."]
Text[8]=["Keep style","This sticks around the mouse."]
Text[9]=["Left coordinate control","This box is right positioned with a 40 X coordinate."]
Text[10]=["Top coordinate control","This box is right positioned with a 50 Y coordinate."]
Text[11]=["Visual effects","This box has a Shadow and a bit of Transparency. It also has a random Transition effect applied to it."]
Text[12]=["Different style","This has a whole new style!"]
Text[13]=["","<b>PlanMagic Business Software:</b><ul><li>Business plan<li>Marketing plan<li>Financial plan<li>Construction plan<li>Bar business plan<li>Restaurant plan<li>Hotel business plan<li>Resort business plan</ul>"]

Style[0]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,10,10,"","","","",""]
Style[1]=["white","black","#cc0000","#FFCC99","","","","","","","center","","","",200,"",2,2,10,10,"","","","",""]
Style[2]=["white","black","#cc0000","#FFCC99","","","","","","","left","","","",200,"",2,2,10,10,"","","","",""]
Style[3]=["white","black","#cc0000","#FFCC99","","","","","","","float","","","",200,"",2,2,10,10,"","","","",""]
Style[4]=["white","black","#cc0000","#FFCC99","","","","","","","fixed","","","",200,"",2,2,150,400,"","","","",""]
Style[5]=["white","black","#cc0000","#FFCC99","","","","","","","","sticky","","",200,"",2,2,10,10,"","","","",""]
Style[6]=["white","black","#cc0000","#FFCC99","","","","","","","","keep","","",200,"",2,2,10,10,"","","","",""]
Style[7]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,40,10,"","","","",""]
Style[8]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,10,50,"","","","",""]
Style[9]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,10,10,51,0.5,75,"simple","gray"]
Style[10]=["white","black","black","white","","","right","","Tahoma","cursive","center","",3,4,200,20,5,10,10,0,50,1,70,"complex","gray"]
Style[11]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,10,10,51,0.5,45,"simple","gray"]
Style[12]=["white","black","#cc0000","#FFCC99","","","","","","","","","","",200,"",2,2,10,10,51,1,0,"",""]

applyCssFilter()
</script>

 

引用

第三步
在body中具体使用函数
<A href="yourpage.html" onMouseOver="stm(Text[0],Style[6])" onMouseOut="htm()">Your text [0][6]</A>
<A href="yourpage.html" onMouseOver="stm(Text[0],Style[7])" onMouseOut="htm()">Your text [0][7]</A>
<A href="yourpage.html" onMouseOver="stm(Text[0],Style[8])" onMouseOut="htm()">Your text [0][8]</A>

 

评论

1 楼 cloudgamer 2009-12-10  

我也写过一个提示效果