<PRE class=html name="code">/*尖端指向左側的三角形，內部，*/</PRE>.triRightInner{ z-index: 3; border: 8px solid #FEFAB8; border-color: transparent #FEFAB8 transparent transparent;<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">/*顏色應與提示框的background-color一致*/</SPAN><BR>
width: 0; height: 0; position: absolute; left:-16px; top:7px;}</style></head><body> <div class="bubble_tooltip_common" id="bubble_tooltip"> <label class="triRight"></label> <label class="triRightInner"></label> <span id="bubble_tooltip_content"></span> </div>
<h1>氣泡對話方塊</h1> <div id="left"> <p> <span onmouseover="showToolTip(event,'這是一個提示框。')" onmouseout="hideToolTip()">滑鼠放於此處，會彈出一個氣泡對話方塊。</span></p> </div> <div id="content"> <p><a href="#" onmouseover="showToolTip(event,'This is the content of the tooltip.')" onmouseout="hideToolTip()">sharejs.com</a></p>
</div> <div id="editor" contenteditable> [Click to edit.] </div></body></html>
<PRE></PRE>
<P></P>
<P><SPAN style="FONT-FAMILY: Microsoft YaHei; FONT-SIZE: 18px"><STRONG>這是JavaScript代碼：</STRONG></SPAN></P>
<P></P>
<PRE class=javascript name="code">function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX + 20; //clientX 事件屬性返回當事件被觸發時滑鼠指標相對於瀏覽器頁面（或客戶區）的水平座標
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY + st + 'px';
obj.style.display = 'block';
fadeIn(obj,5,100);
}
function hideToolTip()
{
var obj = document.getElementById('bubble_tooltip');
//obj.style.display = 'none';
fadeOut(obj,5,0);
}
//設定元素透明度,透明度值按IE規則計,即0~100
function SetOpacity(ev, v){
ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
}
//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
/*
* 參數說明
* elem==>需要淡入的元素
* speed==>淡入速度,正整數(可選)
* opacity==>淡入到指定的透明度,0~100(可選)
*/
speed = speed || 20;
opacity = opacity || 100;
//顯示元素,並將元素值為0透明度(不可見)
elem.style.display = 'block';
SetOpacity(elem, 0);
//初始化透明度變化值為0
var val = 0;
//迴圈將透明值以2遞增,即淡入效果
(function(){
SetOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}
//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/*
* 參數說明
* elem==>需要淡入的元素
* speed==>淡入速度,正整數(可選)
* opacity==>淡入到指定的透明度,0~100(可選)
*/
speed = speed || 20;
opacity = opacity || 0;
//初始化透明度變化值為0
var val = 100;
//迴圈將透明值以5遞減,即淡出效果
(function(){
SetOpacity(elem, val);
val -= 5;
if (val >= opacity) {
setTimeout(arguments.callee, speed);
}else if (val < 0) {
//元素透明度為0後隱藏元素
elem.style.display = 'none';
}
})();
}</PRE><BR>
<BR>
<P></P>
<PRE></PRE>
