PHP & JavaScript Room :: 設置サンプル

実行結果

Finding a Javascript Tool Tip Script | 設置サンプル

▼リンクにマウスオーバーするとツールチップを表示します。

Ajax

Ajax(アジャックス、エイジャックス)は、ユーザーインターフェース構築技術の総称。 XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、 通信結果に応じてDHTMLで動的にページの一部を書き換えるというアプローチを取る。

AjaxはAsynchronous (アシンクロナス/エイシンクロナス、非同期) JavaScript + XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。

Ajax From Wikipedia

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>Finding a Javascript Tool Tip Script | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <style type="text/css">
         img.icon { padding-right:5px; vertical-align:middle; }
         /* ----- tool tip specific styles ----- */
         #theToolTip { position:absolute;left:-300px;width:200px;border:1px solid #999;padding:6px 0px 0px 10px;background-color:#f0f0f0;visibility:hidden;z-index:100;filter:progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,strength=4); }
         #ToolTipPointer { position:absolute;left:-300px;z-index:101;visibility:hidden; }
         #theToolTip p { margin-right:10px;margin-top:0; }
         #ToolTipTextWrap { font-weight:bold;#592c16;margin-right:10px; }
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <h1><a href='http://codylindley.com/Javascript/219/finding-a-javascript-tool-tip-script'>Finding a Javascript Tool Tip Script</a> | 設置サンプル</h1>
      <p>▼リンクにマウスオーバーするとツールチップを表示します。</p>
      <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
         <dl>
            <dt>Ajax</dt>
               <dd>
                  <p>
                     Ajax(アジャックス、エイジャックス)は、<a href="#" class="addToolTip" title="<div id='ToolTipTextWrap'></div><p><img src='/content/img/ajax/info.gif' class='icon' />機械、特にコンピュータとその機械の利用者(通常は人間)の間での情報をやりとりするためのインタフェース。</p>">ユーザーインターフェース</a>構築技術の総称。
                     <a href="#" class="addToolTip" title="<div id='ToolTipTextWrap'></div><p><img src='/content/img/ajax/info.gif' class='icon' />JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト(API)。</p>">XMLHttpRequest</a>(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、
                     通信結果に応じて<a href="#" class="addToolTip" title="<div id='ToolTipTextWrap'></div><p><img src='/content/img/ajax/info.gif' class='icon' />DHTML(Dynamic HTML)は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。</p>">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。
                  </p>
                  <p>AjaxはAsynchronous (アシンクロナス/エイシンクロナス、非同期) JavaScript + XML の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                  <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="addToolTip" title="<div id='ToolTipTextWrap'></div><p>http://ja.wikipedia.org/wiki/Ajax</p>">Ajax From Wikipedia</a></cite>
               </dd>
         </dl>
      </blockquote>
<script language="JavaScript" type="text/JavaScript">
//Edit the informaiton between the quotes below with the path to your image.
var imagePath = "/content/img/ajax/tooltiparrow.gif";
function addwarning(){
var thealinks = document.getElementsByTagName("a");
if (!thealinks) { return; }
for(var x=0;x!=thealinks.length;x++){
if(thealinks[x].className == "addToolTip"){
thealinks[x].setAttribute("tooltiptext",thealinks[x].title);
thealinks[x].removeAttribute("title");
thealinks[x].onmouseover=function gomouseover(){ddrivetip(this.getAttribute("tooltiptext"))};
thealinks[x].onmouseout=function gomouseout(){hideddrivetip();};
}
}
}
var offsetfromcursorX=-7; //Customize x offset of tooltip
var offsetfromcursorY=23; //Customize y offset of tooltip
var offsetdivfrompointerX=13; //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=13; //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
document.write('<div id="theToolTip"></div>'); //write out tooltip DIV
document.write('<img id="ToolTipPointer" src="'+imagePath+'">'); //write out pointer image
var ie=document.all;
var ns6=document.getElementById && !document.all;
var enabletip=false;
if (ie||ns6) {
   var tipobj=document.all? document.all["theToolTip"] : document.getElementById? document.getElementById("theToolTip") : "";
}
var pointerobj=document.all? document.all["ToolTipPointer"] : document.getElementById? document.getElementById("ToolTipPointer") : "";
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!=="undefined") {tipobj.style.width=thewidth+"px";}
if (typeof thecolor!=="undefined" && thecolor!=="") {tipobj.style.backgroundColor=thecolor;}
tipobj.innerHTML=thetext;
enabletip=true;
return false;
}
}
function positiontip(e){
if (enabletip){
var nondefaultpos=false;
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20;
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20;
var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX;
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY;
var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000;
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px";
nondefaultpos=true;
}
else if (curX<leftedge)
{tipobj.style.left="5px";}
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";
pointerobj.style.left=curX+offsetfromcursorX+"px";
}
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";
nondefaultpos=true;
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";
pointerobj.style.top=curY+offsetfromcursorY+"px";
}
tipobj.style.visibility="visible";
if (!nondefaultpos) {pointerobj.style.visibility="visible";}
else{
pointerobj.style.visibility="hidden";}
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false;
tipobj.style.visibility="hidden";
pointerobj.style.visibility="hidden";
tipobj.style.left="-1000px";
tipobj.style.backgroundColor='';
tipobj.style.width='';
}
}
document.onmousemove=positiontip;
addwarning();
</script>
</body>
</html>