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

実行結果

設置サンプル

参照:Easiest Tooltip and Image Preview Using jQuery

Easy Tooltip Using jQuery

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

Ajax

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

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

Ajax From Wikipedia

サムネイル画像にマウスオーバーすると元画像をポップアップ表示

イメージギャラリー(キャプションなし)

イメージギャラリー(キャプションあり)

リンクにマウスオーバーするとリンク先のサムネイル画像をポップアップ表示

キャプションなし

PHP & JavaScript Room

キャプションあり

PHP & JavaScript Room











設置サンプルのソース

<!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>設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
      <script src="/content/lib/easiest-tooltip-and-image-preview-using-jquery/main.js" type="text/javascript"></script>
      <style type="text/css">
         #tooltip { position:absolute; border:1px solid #333; background:#f7f5d1; padding:2px 5px; color:#333; display:none; width:20em; }
         #preview { position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; }
         ul, li { margin:0; padding:0; }
         li { list-style:none; float:left; display:inline; margin-right:10px; }
         div.clear { clear:both; } 
         #screenshot { position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; }
      </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>
      <div id="wrap">
         <h1>設置サンプル</h1>
         <p>参照:<a href='http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery'>Easiest Tooltip and Image Preview Using jQuery</a></p>
         <h2>Easy Tooltip Using jQuery</h2>
         <p>▼リンクにマウスオーバーするとツールチップが表示されます。</p>
         <blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
            <dl>
               <dt>Ajax</dt>
                  <dd>
                     <p>Ajax(アジャックス、エイジャックス)は、ユーザーインターフェース構築技術の総称。
                     <a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" class="tooltip" title="<strong>XMLHttpRequest</strong><br>JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト(API)">XMLHttpRequest</a>(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、
                     通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" class="tooltip" title="<strong>DHTML</strong><br>DHTML(Dynamic HTML)は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
                     <p>AjaxはAsynchronous (アシンクロナス/エイシンクロナス、非同期) JavaScript + <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" class="tooltip" title="<strong>XML</strong><br>Extensible Markup Language (エクステンシブルマークアップランゲージ)。">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
                     <cite><a href="http://ja.wikipedia.org/wiki/Ajax" class="tooltip" title="Ajax From Wikipedia">Ajax From Wikipedia</a></cite>
                  </dd>
            </dl>
         </blockquote>
         <h2>サムネイル画像にマウスオーバーすると元画像をポップアップ表示</h2>
         <h3>イメージギャラリー(キャプションなし)</h2>
         <ul>
            <li><a href="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" class="preview"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt="gallery thumbnail" /></a></li>
            <li><a href="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" class="preview"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" alt="gallery thumbnail" /></a></li>
            <li><a href="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2.jpg" class="preview"><img src="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2_s.jpg" alt="gallery thumbnail" /></a></li>
            <li><a href="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44.jpg" class="preview"><img src="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44_s.jpg" alt="gallery thumbnail" /></a></li>
         </ul>
         <div class="clear"></div>
         <h3>イメージギャラリー(キャプションあり)</h2>
         <ul>
            <li><a href="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" class="preview" title="くまさんケーキ"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt="gallery thumbnail" /></a></li>
            <li><a href="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" class="preview" title="クリスピー・クリーム・ドーナツ"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" alt="gallery thumbnail" /></a></li>
            <li><a href="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2.jpg" class="preview" title="CAFE EAT@代官山"><img src="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2_s.jpg" alt="gallery thumbnail" /></a></li>
            <li><a href="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44.jpg" class="preview" title="みかん星人"><img src="http://farm4.static.flickr.com/3224/2971760010_e4c6f7bb44_s.jpg" alt="gallery thumbnail" /></a></li>
         </ul>
         <div class="clear"></div>

         <h2>リンクにマウスオーバーするとリンク先のサムネイル画像をポップアップ表示</h2>
         <h3>キャプションなし</h3>
         <p><a href="http://phpjavascriptroom.com/" class="screenshot" rel="/content/lib/easiest-tooltip-and-image-preview-using-jquery/pjr_screenshot.jpg">PHP & JavaScript Room</a></p>
         <h3>キャプションあり</h3>
         <p><a href="http://phpjavascriptroom.com/" class="screenshot" rel="/content/lib/easiest-tooltip-and-image-preview-using-jquery/pjr_screenshot.jpg" title="PHP & JavaScript Room">PHP &amp; JavaScript Room</a></p>
         <br><br><br><br><br><br><br><br><br><br>
      </div>
   </body>
</html>