画像などの要素説明をオーバーレイ表示で印象深く見せられるjQueryプラグイン「Chardin.js」

画像などの要素説明をオーバーレイ表示で印象深く見せられるjQueryプラグイン「Chardin.js」サンプル
WEBの表示領域は膨大にあるといってもごちゃごちゃしすぎると見ている側には鬱陶しいものです。
そこで、説明をオーバーレイで見せ、すっきりかつ印象的にしちゃいましょう。
jQueryプラグインのChardin.jsであれば簡単なことこの上なしです。

使用方法 Chardin.jsからファイル一式をダウンロード。
<link rel="stylesheet" type="text/css" href="chardinjs.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="chardinjs.js"></script>
<script>
$(function() {
$('#id名').click(function () {
$('body').chardinJs('start');
});
});
</script>

上記を記述すると、id名をクリックした時に説明が表示されるようになります。
表示する側には下記のようにdata-introという説明文と表示場所を指定するdata-positionを付与します。
<img src="画像パス"
data-intro="説明文"
data-position="right" />
<a href="#" id="id名">説明を見る</a>

場所はleft, top, right, bottomがあります。

画像などの要素説明をオーバーレイ表示で印象深く見せられるjQueryプラグイン「Chardin.js」サンプル

sponsors

「画像などの要素説明をオーバーレイ表示で印象深く見せられるjQueryプラグイン「Chardin.js」」をシェアする

記事作成:
記事URL:

TOP > > > 画像などの要素説明をオーバーレイ表示で印象深く見せられるjQueryプラグイン「Chardin.js」