skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

画像のキャプションを画像から飛び出るように表示するJavaScript「jQuery Drop Captions Plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画像にキャプションを付けることでユーザーに配慮することが可能です。
JavaScriptライブラリのjQueryプラグインのjQuery Drop Captions Pluginを使用すると、画像から飛び出すようにキャプションを表示できます。

使用方法
jQuery Drop Captions Pluginからファイルをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.dropcaptions.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('.class名').dropCaptions({
showSpeed: 2000, //表示スピード
hideSpeed: 1000, //隠すスピード
showOpacity: 1, //表示する時の透明度
hideOpacity: 0, //隠す時の透明度
showEasing: 'easeOutElastic', //表示時の動き
hideEasing: 'easeInQuint', //隠すときの動き
hideDelay: 2000 //隠れるまでの時間
});
});
</script>

あとはimgに指定したclassを付与するとtitle属性の中身が表示されます。
<img title="ここは画像のキャプションです。" src="画像パス" class="class名" />
画像のキャプションを画像から飛び出るように表示するJavaScript「jQuery Drop Captions Plugin」サンプル

記事作成：2010年01月08日

前の記事：twitterのリストを使って、サイトのファンを表示するJavaScript「A Twitter List Powered Fan Page」
次の記事：Google Mapsを簡単に表示するJavaScript「gMap」