Tooptip.js:
复制代码代码如下::
Funktion getViewPorthEight () {
if (window.innerHeight! = window.undefined) return Window.InnerHeight;
if (document.compatmode == 'CSS1Compat') return document.documentElement.clientHeight;
if (document.body) return document.body.clientHeight;
Rückgabefenster.undefined;
}
Funktion GetViewPortwidth () {
if (window.innnerwidth! = window.undefined) return window.innnerwidth;
if (document.compatmode == 'CSS1Compat') return document.documentElement.clientwidth;
if (document.body) return document.body.clientwidth;
Rückgabefenster.undefined;
}
/**
* Bekommt das echte Scroll -Top
*/
function getCrolltop () {
if (self.pageyOffset) // alle außer Explorer
{
return self.pageyoffset;
}
sonst if (document.documentElement && document.documentElement.scrolltop)
// Explorer 6 streng
{
return document.documentElement.scrolltop;
}
sonst wenn (document.body) // alle anderen Entdecker
{
return document.body.scrolltop;
}
}
Funktion getScrollleft () {
if (self.pagexoffset) // alle außer Explorer
{
return self.pagexoffset;
}
sonst if (document.documentElement && document.documentElement.scrollleft)
// Explorer 6 streng
{
return document.documentElement.scrollleft;
}
sonst wenn (document.body) // alle anderen Entdecker
{
return document.body.scrollleft;
}
}
/*
[HTML]
渐变的弹出图片
使用方法 ：
将 Tooltip.js 包含在网页 Körper 的结束标签后
调用方法 ：
[Code]
<a href="pages.jpg" target='_blank' onMouseOver="toolTip('<img src=http://zhouzh:90/templet/T_yestem_channel/pages_small.jpg>')" onMouseOut="toolTip()"><img src='pages_small.jpg' border=0 Breite = 30 Höhe = 20 Align = "Absmiddle"> </a>
必须 CSS 样式
复制代码代码如下::
.Trans_msg
{
Filter: Alpha (Opazität = 100, aktiviert = 1) discurateTrans (Dauer = .2, Übergang = 1) Blendtrans (Dauer = 0,2);
}
*/
//-初始化变量--
var rt = true; // 允许图像过渡
var bt = true; // 允许图像淡入淡出
var tw = 150; // 提示框宽度
var endaction = false; // 结束动画
var ns4 = document.layers;
var ns6 = document.getElementById &&! document.all;
var ie4 = document.all;
OffsetX = 10;
offsety = 20;
var tooltipStyle = "";
Funktion inittooltips ()
{
tempdiv = document.createelement ("div");
tempdiv.id = "tooltiplayer";
tempdiv.style.position = "Absolute";
tempdiv.style.display = "Keine";
document.body.appendchild (tempdiv);
if (ns4 || ns6 || IE4)
{
if (ns4) tooltipStyle = document.toolTiplayer;
sonst if (ns6) tooltipStyle = document.getElementById ("Tooltiplayer"). Stil;
sonst wenn (ie4) tooltipStyle = document.all.tooltiplayer.Style;
if (ns4) document.captureEvents (Event.MousEmove);
anders
{
TooltipStyle.vissibility = "sichtbar";
TooltipStyle.Display = "Keine";
}
document.onmousemove = moveTomouseloc;
}
}
Funktion tOoltip (MSG, FG, BG)
{
versuchen {
if (tooltip.arguments.length <1) // ausblenden
{
if (ns4)
{
TooltipStyle.vissibility = "Hidden";
}
anders
{
//-图象过渡 ， 淡出处理--
if (! endAction) {tooltipStyle.display = "Keine";}
if (rt) document.all ("msg1"). Filter [1] .Apply ();
if (bt) document.all ("msg1"). Filter [2] .Apply ();
document.All ("msg1"). Filter [0] .Opacity = 0;
if (rt) document.all ("msg1"). Filter [1] .play ();
if (bt) document.all ("msg1"). Filter [2] .play ();
if (rt) {
if (document.All ("msg1"). Filter [1] .Status == 1 || document.all ("msg1"). Filter [1] .Status == 0) {
TooltipStyle.display = "Keine";}
}
if (bt) {
if (document.All ("msg1"). Filter [2] .Status == 1 || document.All ("msg1"). Filter [2] .Status == 0) {
TooltipStyle.display = "Keine";}
}
if (! rt &&! bt) tooltipStyle.display = "Keine";
// ------------------------------
}
}
sonst // Show
{
if (! fg) fg = "#777777";
if (! bg) bg = "#eeeeee";
var content =
'<table id = "msg1" name = "msg1" cellspacing = "0" cellpadding = "1" bgcolor = "' + fg + '"> <td>' +
'<table cellspacing = "2" cellpadding = "3" bgcolor = "' + bg +
'"> <td> <font face =" arial "color ="' + fg +
'"size ="-2 ">' + msg +
'</font> </td> </table> </td> </table>';
if (ns4)
{
TooltipStyle.Document.write (Inhalt);
TooltipStyle.Document.close ();
TooltipStyle.vissibility = "sichtbar";
}
if (ns6)
{
document.GetElementById ("Tooltiplayer"). Innerhtml = Inhalt;
TooltipStyle.display = 'Block'
}
if (dh4)
{
document.All ("Tooltiplayer"). Innerhtml = Inhalt;
TooltipStyle.display = 'Block'
//-图象过渡 ， 淡入处理--
var cssopaction = document.All ("msg1"). Filter [0] .optazität
document.All ("msg1"). Filter [0] .Opacity = 0;
if (rt) document.all ("msg1"). Filter [1] .Apply ();
if (bt) document.all ("msg1"). Filter [2] .Apply ();
document.All ("msg1"). Filter [0] .Opacity = CSSOPAction;
if (rt) document.all ("msg1"). Filter [1] .play ();
if (bt) document.all ("msg1"). Filter [2] .play ();
// ------------------------------
}
}
} catch (e) {}
}
Funktion movetomouseloc (e)
{
var scrolltop = getCrolltop ();
var scrollleft = getCrollLeft ();
if (ns4 || ns6)
{
x = e.Pagex + scrollleft;
y = e.pagey - scrolltop;
}
anders
{
x = event.clientX + scrollleft;
y = event.clienty;
}
if (x-scrollleft> GetViewPortwidth () / 2) {
x = x - document.getElementById ("Tooltiplayer"). Offsetwidth - 2 * OffsetX;
}
if ((y+document.getElementById ("Tooltiplayer").
y = GetViewPorthEight ()-document.getElementById ("Tooltiplayer").
}
TooltipStyle.left = (x + OffsetX) + 'px';
TooltipStyle.top = (y + offsety + scrolltop) + 'px';
zurückkehren;
}
inittooltips ();
主页面::
引入 INDEX.CSS
复制代码代码如下::
<link href = "css/index.css" rel = "stylesheet" type = "text/css"/>
<body style = "text-align: center">
<div>
<ul>
<li>
<div> <a href = "http://www.lanrentuku.com/" target = "_ leer"> <img src = 'Bilder/2009511956153474660_Small.jpg onmouseout = "tooltip ()"> </a> </div>
</li>
<li>
<div><a href="http://www.lanrentuku.com/" target="_blank"><img src='images/2009551813457815940_small.jpg' onMouseOver="toolTip('<img src=images/2009551813457815940.jpg>')" onmouseout = "tooltip ()"> </a> </div>
</li>
</ul>
</div>
引入 Tooptip.js
复制代码代码如下::
<script Language = "javaScript" src = "js/tooltip.js"> </script>
</body>
</html>
Index.css:
复制代码代码如下::
/*首页*/
html {Überlauf: -moz-scrollbars-revertical; } /*Zeigen Sie immer Firefox -Scrollbar* /
Körper {Schrift: 12px/22px "宋体"; Wortausbruch: Break-All; Text-Align: links; Hintergrund:#C0C0C0; Farbe:#4e4e4e;}
ul, li {Listenstil: Keine;}
a {Farbe:#333; Textdekoration: Keine;}
A: Hover {Farbe:#ff722d; Textdekoration: Keine;}
img {Border: 0;}
A IMG, A: Hover img {Border: 0;}
.latestweb {width: 980px; Rand: 10px Auto 0;}
.Latestweb ul {Überlauf: versteckt; _Height: 1%;}
.Latestweb li {float: links; Grenze: 1PX Solid #Ebeaea; Breite: 150px; Polsterung: 10px; Rand: 14px 14px 0 0; }
.Trans_msg {filter: alpha (opacity = 100, enabled = 1) discloseTtrans (Dauer = .2, Übergang = 1) Blendtrans (Duration = .2);}
Div.BodyContent {Schriftfamilie: Arial, Helvetica, sans-serif; Polster: 0 10px 10px 13px; Farbe:#555; Zeilenhöhe: 22px; Text-Align: Justify; Text-Justify: Inter-Ideograph;}
Div.BodyContent ul {Margin-Links: 0px}