TOOPTIP.JS:
复制代码代码如下:
fungsi getViewPortheight () {
if (window.innerheight! = window.undefined) return window.innerheight;
if (document.compatmode == 'css1compat') return document.documentelement.clientHeight;
if (document.body) return document.body.clientHeight;
return window.undefined;
}
fungsi getViewportWidth () {
if (window.innerwidth! = window.undefined) return window.innerwidth;
if (document.compatmode == 'css1compat') return document.documentelement.clientwidth;
if (document.body) return document.body.clientwidth;
return window.undefined;
}
/**
* Mendapat bagian atas gulir yang sebenarnya
*/
fungsi getscrolltop () {
if (self.pageyoffset) // semua kecuali penjelajah
{
mengembalikan self.pageyoffset;
}
lain if (document.documentelement && document.documentelement.scrolltop)
// penjelajah 6 ketat
{
return document.documentelement.scrolltop;
}
lain jika (document.body) // semua penjelajah lainnya
{
return document.body.scrolltop;
}
}
fungsi getScrollleft () {
if (self.pagexoffset) // semua kecuali penjelajah
{
mengembalikan self.pagexoffset;
}
lain if (document.documentelement && document.documentelement.scrollleft)
// penjelajah 6 ketat
{
return document.documentelement.scrollleft;
}
lain jika (document.body) // semua penjelajah lainnya
{
return document.body.scrollleft;
}
}
/*
[html]
渐变的弹出图片
使用方法 ：
将 tooltip.js 包含在网页 tubuh 的结束标签后
调用方法 ：
[kode]
<a href = "halaman.jpg" target = '_ blank' onmouseover = "tooltip ('<img src = http: // zhouzh: 90/templet/t_yestem_channel/pages_small.jpg>')" ondeToUt = "fooltip ()" <'’paving.jpg>')" puppg> ') "ont toughper (). lebar = 30 tinggi = 20 align = "absmiddle"> </a>
必须 CSS 样式
复制代码代码如下:
.trans_msg
{
Filter: alpha (opacity = 100, diaktifkan = 1) mengungkapkan (durasi = .2, transisi = 1) blendtrans (durasi = .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 = "";
fungsi inittooltips ()
{
tempdiv = document.createelement ("div");
tempdiv.id = "tooltiplayer";
tempdiv.style.position = "absolute";
tempdiv.style.display = "none";
Document.Body.AppendChild (TempDiv);
if (ns4 || ns6 || ie4)
{
if (ns4) tooltipstyle = document.tooltiplayer;
lain jika (ns6) tooltipstyle = document.geteLementById ("tooltiplayer"). gaya;
lain jika (ie4) tooltipstyle = document.all.tooltiplayer.style;
if (ns4) document.captureEvents (event.mouseMove);
kalau tidak
{
tooltipstyle.visibility = "visible";
tooltipstyle.display = "none";
}
document.onmouseMove = movetomouseloc;
}
}
function tooltip (msg, fg, bg)
{
mencoba {
if (tooltip.arguments.length <1) // sembunyikan
{
if (ns4)
{
tooltipstyle.visibility = "tersembunyi";
}
kalau tidak
{
//-图象过渡 ， 淡出处理-
if (! endaction) {tooltipstyle.display = "none";}
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 = "none";}
}
if (bt) {
if (document.all ("msg1"). filter [2] .status == 1 || document.all ("msg1"). filter [2] .status == 0) {
tooltipstyle.display = "none";}
}
if (! rt &&! bt) tooltipstyle.display = "none";
// ----------------------
}
}
lain // tunjukkan
{
if (! fg) fg = "#777777";
if (! bg) bg = "#eeeeee";
var konten =
'<tabel id = "msg1" name = "msg1" cellspacing = "0" cellpadding = "1" bgcolor = "' + fg + '"> <td>' +
'<tabel cellspacing = "2" cellpadding = "3" bgcolor = "' + bg +
'"> <td> <font face =" Arial "color ="' + fg +
'"size ="-2 ">' + msg +
'</font> </td> </able> </td> </able>';
if (ns4)
{
tooltipstyle.document.write (konten);
tooltipstyle.document.close ();
tooltipstyle.visibility = "visible";
}
if (ns6)
{
document.getElementById ("tooltiplayer"). innerHtml = konten;
tooltipstyle.display = 'block'
}
if (ie4)
{
document.all ("tooltiplayer"). innerHtml = konten;
tooltipstyle.display = 'block'
//-图象过渡 ， 淡入处理-
var cssopaction = document.all ("msg1"). filter [0] .opacity
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) {}
}
Fungsi Movetomouseloc (E)
{
var scrolltop = getScrollTop ();
var scrollleft = getSrollleft ();
if (ns4 || ns6)
{
x = e.pagex + scrollleft;
y = e.pagey - scrolltop;
}
kalau tidak
{
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"). offsetHeight+offsety)> getViewPortheight ()) {
y = getViewPortheight ()-document.getElementById ("tooltiplayer"). offsetHeight-offsety;
}
tooltipstyle.left = (x + offsetx) + 'px';
tooltipstyle.top = (y + offsety + scrolltop) + 'px';
Kembali Benar;
}
inittooltips ();
主页面:
引入 Index.CSS
复制代码代码如下:
<tautan 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 = "_ blank"> <img src = 'gambar/2009511956153474660_small.jpg' onmouseover = "Tooltip ('<img src = gambar/200559.jpg' ontmouseover =" onmouseout = "tooltip ()"> </a> </div>
</li>
<li>
<Div> <a href = "http://www.lanrentuku.com/" target = "_ blank"> <img src = 'gambar/2009551813457815940_small.jpg' onmouseover = "Tooltip ('<img src src = 20095.jpg' ontmouseover =" onmouseout = "tooltip ()"> </a> </div>
</li>
</ul>
</div>
引入 tooptip.js
复制代码代码如下:
<bahasa skrip = "JavaScript" src = "js/tooltip.js"> </script>
</body>
</html>
index.css:
复制代码代码如下:
/*首页*//
html {overflow: -moz-scrollbars-vertikal; } /*Selalu tunjukkan scrollbar firefox* /
tubuh {font: 12px/22px "宋体"; Word-Break: Break-all; Teks-Align: Kiri; Latar Belakang:#C0C0C0; Warna:#4e4e4e;}
ul, li {List-style: none;}
A {Color:#333; Dekorasi Teks: Tidak Ada;}
A: Hover {Color:#FF722D; Dekorasi Teks: Tidak Ada;}
img {border: 0;}
a img, a: hover img {border: 0;}
.latestWeb {width: 980px; Margin: 10px Auto 0;}
.latestweb ul {overflow: tersembunyi; _Height: 1%;}
.latestweb li {float: left; Perbatasan: 1px solid #ebeaea; Lebar: 150px; padding: 10px; Margin: 14px 14px 0 0; }
.trans_msg {filter: alpha (opacity = 100, diaktifkan = 1) mengungkapkan (durasi = .2, transisi = 1) blendtrans (durasi = .2);}
Div.BodyContent {font-family: Arial, Helvetica, sans-serif; Padding: 0 10px 10px 13px; Warna:#555; garis-line-height: 22px; Text-align: Justify; Text-yustify: Inter-ideograph;}
Div.BodyContent ul {margin-left: 0px}