2009年6月9日 星期二

言之有理?

一.
記得兒子的國語考卷有一個問答題:
如果你是孔融你會讓梨嗎? 為什麼?
兒子的答案是: 會, 因為我不喜歡吃梨.

二.
同事從巴里島渡假回來, 正忙著處理一堆軟體設計需求.
我調侃她說: "誰教有人去晒太陽不帶NoteBook!"
她很正經的回答: "我有帶啊! 但是只有Lobby可以上網,
而且Lobby蚊子超多的."
我好奇的問: "那房間呢?"
她說: "房間雖然沒有蚊子但不能上網."
我追問: "房間有紗門嗎? 為什麼房間就沒有蚊?"
她說: "沒有啊! 陽台也很大, 連紗窗都沒有!"
"對啊! 為什麼我沒想到"
"那裡Lobby蚊子超多, 房間就是沒有蚊子?"
我若有所悟: "那可能是因為蚊子都沒付房錢的關係吧!"
她:-~

2009年6月6日 星期六

Tooltip Of Javascript

一個好用的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)
}