Animated Tooltip Javascript | 設置サンプル

Animated Tooltip Javascript | 設置サンプル

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

シンプルなツールチップ

Ajax

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

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

Ajax From Wikipedia

アニメーション効果付のツールチップ

Ajax

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

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

Ajax From Wikipedia

アニメーション効果付のツールチップ（背景色指定あり）

Ajax

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

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

Ajax From Wikipedia

アニメーション効果付のツールチップ（背景画像指定あり）

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>Animated Tooltip Javascript | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <script language="javascript" src="/content/lib/animated_tooltip_javascript/Tooltip.js"></script>
      <script type="text/javascript">
         var t1=null;
         var l1="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）";
         var l2="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。";
         var l3="<strong>Ajax From Wikipedia<\/strong><br \/>http://ja.wikipedia.org/wiki/Ajax";
         var t1=t2=t3=t4=null;
         function init()
         {
          t1 = new ToolTip("a",false);
          t2 = new ToolTip("b",true,40);
          t3 = new ToolTip("c",true,40);
          t4 = new ToolTip("d",true,40);
         }
      </script>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body onload="init()">
      <h1><a href='http://ashishware.com/Tooltip.shtml'>Animated Tooltip Javascript</a> | 設置サンプル</h1>
      <div id="a" style="background-color:#f5f5e8;width:300px;padding:5px;height:6em;overflow:auto;border:solid 1px gray;text-align:left;"></div>
      <div id="b" style="background-color:#f5f5e8;width:300px;padding:5px;height:70px;border:solid 1px gray;text-align:left;"></div>
      <div id="c" style="background-color:#0075d9;color:#fff;padding:5px;width:300px;height:70px;border:solid 1px #0075d9;text-align:left;filter:alpha(Opacity=80);opacity:0.80;"></div>
      <div id="d" style="background-color:white;width:300px;height:70px;padding:5px;filter:alpha(Opacity=75);opacity:0.75;border:solid 1px gray;background-image:url('/content/img/bg_stripe_dark.png');text-align:left;color:#fff;"></div>
      <p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
      <h2>シンプルなツールチップ</h2>
      <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
         <dl>
            <dt>Ajax</dt>
               <dd>
                  <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="ttip" onmouseover="if(t1)t1.Show(event,l1)" onmouseout="if(t1)t1.Hide(event)">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                  通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="ttip" onmouseover="if(t1)t1.Show(event,l2)" onmouseout="if(t1)t1.Hide(event)">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="ttip" onmouseover="if(t1)t1.Show(event,l3)" onmouseout="if(t1)t1.Hide(event)">Ajax From Wikipedia</a></cite>
               </dd>
         </dl>
      </blockquote>
      <h2>アニメーション効果付のツールチップ</h2>
      <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
         <dl>
            <dt>Ajax</dt>
               <dd>
                  <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="ttip" onmouseover="if(t2)t2.Show(event,l1)" onmouseout="if(t2)t2.Hide(event)">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                  通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="ttip" onmouseover="if(t2)t2.Show(event,l2)" onmouseout="if(t2)t2.Hide(event)">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="ttip" onmouseover="if(t2)t2.Show(event,l3)" onmouseout="if(t2)t2.Hide(event)">Ajax From Wikipedia</a></cite>
               </dd>
         </dl>
      </blockquote>
      <h2>アニメーション効果付のツールチップ（背景色指定あり）</h2>
      <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
         <dl>
            <dt>Ajax</dt>
               <dd>
                  <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="ttip" onmouseover="if(t3)t3.Show(event,l1)" onmouseout="if(t3)t3.Hide(event)">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                  通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="ttip" onmouseover="if(t3)t3.Show(event,l2)" onmouseout="if(t3)t3.Hide(event)">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="ttip" onmouseover="if(t3)t3.Show(event,l3)" onmouseout="if(t3)t3.Hide(event)">Ajax From Wikipedia</a></cite>
               </dd>
         </dl>
      </blockquote>
      <h2>アニメーション効果付のツールチップ（背景画像指定あり）</h2>
      <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
         <dl>
            <dt>Ajax</dt>
               <dd>
                  <p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="ttip" onmouseover="if(t4)t4.Show(event,l1)" onmouseout="if(t4)t4.Hide(event)">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、
                  通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="ttip" onmouseover="if(t4)t4.Show(event,l2)" onmouseout="if(t4)t4.Hide(event)">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="ttip" onmouseover="if(t4)t4.Show(event,l3)" onmouseout="if(t4)t4.Hide(event)">Ajax From Wikipedia</a></cite>
               </dd>
         </dl>
      </blockquote>
   </body>
</html>