jQueryプラグイン slidermessage

現在位置：E-riverstyle Design ホーム DevelopmentJavaScriptライブラリ

jQuery.slidermessage.js

概要

画像にマウスを重ねるとメッセージがスライダーで画像の上に表示されます。

デモ

jQuery.slidermessage.jsのデモページはこちらから

設置方法

本プラグインは、jQuery 1.4.2で動作検証をしています。jQuery 1.4.2以上が必要です。公式サイトから入手してください。入手したら、head要素の範囲以内にjQueryを設置してください。

jQueryのダウンロードはこちらから

<script type="text/javascript" src="jquery.js"></script>

また以下のようなAPIの指定でもかまいません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

必要ファイルをダウンロードして、JSファイルを同じくhead要素の範囲以内に設置してください。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slidermessage.js"></script>

また、下記のように本jQueryプラグインを動作せるために、head要素に設置してください。

<script type="text/javascript">
$(function(){
    $(".slider").sliderMessage();
});
</script>

スライダーを表示させたい画像に下記のようにclass属性にsliderという値とtitle属性に説明文を記述してください。

<img src="img.jpg" class="slider" title="画像の説明文" alt="画像の代替テキスト" width="200" height="100" />

動作確認

Firefox 3.6.13
Google Chrome 8.0.552.224
Safari 5.0.2
Opera 11
Internet Explorer 8

オプション

本プラグインはoptionでスライダーのデザインと表示されるスピードの変更ができます。それぞれのオプションは下記表となっています。

オプションの一覧表
オプション	意味	値
background	スライダーの背景色	カラーコード
color	スライダーの文字色	カラーコード
fontSize	スライダーの文字のサイズ	数値（px）
border	スライダーの枠線	数値（枠線）、solid、dotted（枠線のスタイル）、カラーコード（枠線の色）
speed	スライダーの表示速度	数値（ミリ秒）
opacity	スライダーの背景色の透明度	数値（0から1）

オプション適用例

背景色と文字色を変更したい場合は下記のように指定してください。

<script type="text/javascript">
$(function(){
    $(".slider").sliderMessage({
                     color : 'red',
                     background : "blue"},100);
});
</script>