Sweet Titles 1.0 | 設置サンプル

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

実行結果

Sweet Titles 1.0 by Dastin Dias | 設置サンプル

abbr、acronym、a要素にマウスオーバーすると、各属性の値をツールチップ表示します。

abbr要素の例

title属性とabbr要素内のテキストがツールチップ表示されます。

<abbr title='用語の説明'>用語</abbr>

acronym要素の例

title属性とacronym要素内のテキストがツールチップ表示されます。

<acronym title='用語の説明'>用語</acronym>

a要素の例

href属性とtitle属性がツールチップ表示されます。

<a href='http://～' title='リンク先の説明'>リンク先</>

設置サンプルのソース

<!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>Sweet Titles 1.0 | 設置サンプル</title>
      <script type="text/javascript" src="/content/lib/sweet-titles/js/addEvent.js"></script>
      <script type="text/javascript" src="/content/lib/sweet-titles/js/sweetTitles.js"></script>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <link rel="stylesheet" type="text/css" href="/content/lib/sweet-titles/css/sweetTitles.css" type="text/css" media="screen,projection" />
   <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>
      <div id="wrapper">
         <h1><a href="http://www.dustindiaz.com/sweet-titles-finalized/">Sweet Titles 1.0 by Dastin Dias</a> | 設置サンプル</h1>
         <p>abbr、acronym、a要素にマウスオーバーすると、各属性の値をツールチップ表示します。</p>
         <h2>abbr要素の例</h2>
         <p>title属性とabbr要素内のテキストがツールチップ表示されます。</p>
         <pre>&lt;abbr title='用語の説明'&gt;用語&lt;/abbr&gt;</pre>
         <ul>
            <li><abbr title="JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）">XMLHttpRequest</abbr>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し・・・</li>
         </ul>
         <h2>acronym要素の例</h2>
         <p>title属性とacronym要素内のテキストがツールチップ表示されます。</p>
         <pre>&lt;acronym title='用語の説明'&gt;用語&lt;/acronym&gt;</pre>
         <ul>
            <li>通信結果に応じて<acronym title="DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</acronym>で動的にページの一部を書き換えるというアプローチを・・・</li>
         </ul>
         <h2>a要素の例</h2>
         <p>href属性とtitle属性がツールチップ表示されます。</p>
         <pre>&lt;a href='http://～' title='リンク先の説明'&gt;リンク先&lt;/&gt;</pre>
         <ul>
            <li>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" title="Extensible Markup Language （エクステンシブルマークアップランゲージ）。">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</li>
            <li><a href="http://ja.wikipedia.org/wiki/Ajax" title="Ajax From Wikipedia">Ajax From Wikipedia</a></li>
         </ul>
      </div>
   </body>
</html>