一個好用的Javascript Tooptip:(Sorry已經忘了出處)
1. 先加入 mytooltip.js
2. 在</HEAD>前新增一個css:
<style type="text/css">
.Text { FONT-WEIGHT: normal; FONT-SIZE: 8pt; COLOR: #333333; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Sans-serif, 'Times New Roman'; TEXT-DECORATION: none }
.toolTip { FONT-SIZE: 8pt; FILTER: alpha(opacity=70); FONT-FAMILY: Verdana, Arial, Sans-serif, 'Times New Roman'; -moz-opacity: 0.7; opacity: 0.7 }
</style>
</HEAD>
3. <body onload="initToolTips();">
4. body 下加一個
<div id="toolTipLayer" style="RIGHT:0px; LEFT:0px; VISIBILITY:hidden; POSITION:absolute"></div>
5. 在要顯示的物件上加MouserOver 及 MouserOut:
<asp:Image id="Image1" STYLE='CURSOR:hand' ImageUrl="../images/show.gif" runat="server" onMouseOver="toolTip('Hello This is Tooltips', '#FFFFFF', 'Green');" onMouseOut="toolTip();"></asp:Image>
(當然不一定要asp:物件
好像還可以Show圖, 用到再來看清楚好了...)
註: mytooltip.js 原始碼
//browser detection
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
&& (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
//browser detection
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
&& (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
//tooltip Position
var offsetX = 0;
var offsetY = -25;
var opacity = 100;
var toolTipSTYLE;
function initToolTips(){
if(document.getElementById){
toolTipSTYLE = document.getElementById("toolTipLayer").style;
}
if(is_ie || is_nav6up)
{
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
document.onmousemove = moveToMousePos;
}
}
function moveToMousePos(e)
{
if(!is_ie){
x = e.pageX;
y = e.pageY;
}else{
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
}
toolTipSTYLE.left = x + offsetX+'px';
toolTipSTYLE.top = y + offsetY+'px';
return true;
}
function toolTip(msg, fg, bg)
{
if(toolTip.arguments.length < 1) // if no arguments are passed then hide the tootip
{
if(is_nav4)
toolTipSTYLE.visibility = "hidden";
else
toolTipSTYLE.display = "none";
}
else // show
{
if(!fg) fg = "#777777";
if(!bg) bg = "#ffffe5";
var content = '<table border="0" cellspacing="0" cellpadding="0" class="toolTip"><tr><td bgcolor="' + fg + '">' +
'<table border="0" cellspacing="1" cellpadding="0"<tr><td bgcolor="' + bg + '">'+
'<font face="sans-serif" color="' + fg + '" size="-2">' + msg +
'</font></td></tr></table>'+
'</td></tr></table>';
if(is_nav4)
{
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
else if(is_ie || is_nav6up)
{
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block'
}
}
}
s = '<table width="100%" cellspacing="2" cellpadding="0" border="0">';
s += '<tr><td><img src="http://upload.wikimedia.org/wikipedia/meta/2/2a/Nohat-logo-nowords-bgwhite-200px.jpg" border="0"/> </td><td valign="top">WikiPedia</td></tr>';
s += '<tr><td colspan="2" class="Text"><hr/>this is a test for simple tooltip. <br/>You can add text and images to the tooltip</td></tr>';
s += '</table>'
function show(){
toolTip(s)
}
沒有留言:
張貼留言