【ハウツー】ゼロからはじめるslideViewer - 画像をスライド表示できるjQueryプラグイン (4) ツールチップの表示 | パソコン

【ハウツー】

ゼロからはじめるslideViewer - 画像をスライド表示できるjQueryプラグイン

4 ツールチップの表示

古籏一浩　 [2007/11/25]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- ／4

slideViewerでは、番号の上にマウスカーソルを重ねた時にツールチップを表示できます。表示内容は<img>タグのalt属性に記述されたものとなります。ツールチップの表示は以下のようにtoolTipオプションにtrueを指定します。

$(～).slideView({toolTip: true})

しかし、これだけではエラーとなり表示されません。というのもツールチップの表示には、「tooltip」という他のjQueryプラグインが必要なためです。tooltipプラグインはこのサイトから入手できます。

tooltipプラグインのサイト。「Download Tooltip plugin 1.1」をクリックするとダウンロードできます

ページ最初の方にある「Download Tooltip plugin 1.1」のリンク文字をクリックするとダウンロードできます。ZIP形式で圧縮されているので解凍します。

ここで必要になるのはスタイルシートファイル「jquery.tooltip.css」、スクリプトファイル「jquery.dimensions.js」と「jquery.tooltip.js」です(画面写真参照)。

解凍されたファイル

これらを<link>タグと<script>タグとを使って以下のように読み込ませます。

<link rel="stylesheet" href="css/jquery.tooltip.css" type="text/css">

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.js"></script>
<script type="text/javascript" src="js/jquery.slideviewer.1.1.js"></script>

これでオプションにtoolTip: trueが指定されていれば、画像番号の上にマウスカーソルが重なった時にキャプションが表示されます。


番号上にマウスが重なると、ツールチップが表示されます

サンプル03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/slideviewer.css" type="text/css">
        <link rel="stylesheet" href="css/jquery.tooltip.css" type="text/css">
        <link rel="stylesheet" href="css/main.css" type="text/css">
        <title>slideViewerサンプル</title>
        <script type="text/javascript" src="js/jquery-1.2.1.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
        <script type="text/javascript" src="js/jquery.dimensions.js"></script>
        <script type="text/javascript" src="js/jquery.tooltip.js"></script>
        <script type="text/javascript" src="js/jquery.slideviewer.1.1.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                $("#album").slideView({
                    toolTip: true
                });
            });
        // --></script>
    </head>
    <body>
    <h1>slideViewerサンプル</h1>
        <div id="album" class="svw">
            <ul>
                <li><img src="photo/001.jpg" width="384" height="216" alt="富士山"></li>
                <li><img src="photo/002.jpg" width="384" height="216" alt="夕焼け"></li>
                <li><img src="photo/003.jpg" width="384" height="216" alt="富山湾"></li>
                <li><img src="photo/004.jpg" width="384" height="216" alt="白糸の滝"></li>
                <li><img src="photo/005.jpg" width="384" height="216" alt="高原の朝"></li>
            </ul>
        </div>
    </body>
</html>

先頭
前へ
- 1
- 2
- 3
- 4
- ／4

ジャングル、3種類の「筆ぐるめ Ver.15」発売記念キャンペーンを実施

ゼロからはじめるslideViewer - 画像をスライド表示できるjQueryプラグイン

4 ツールチップの表示

サンプル03

新着記事

特設サイトの情報

人気記事

新着記事

特別企画

マイナビニュースマガジン