マウスオーバーで画像にキャプションを表示「captall」
当ページのリンクには広告が含まれています。
スポンサーリンク
マウスオーバーで画像キャプションの表示を実装するプラグイン「captall」を紹介します。
jQueryプラグイン「captall」
このプラグインを使えば、画像タグのaltに指定したテキストを効果付きのキャプションに設定できます。
設定オプションは多岐にわたり、スライドなどの動き・色・位置・幅などなど……設定も簡単なので、画像キャプションにアクセントを付けたい場合には重宝するプラグインです。
スポンサーリンク
デモでは動作を確認してみてください。画像にマウスオーバーするとキャプションがアクション付きで登場します。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>captall - jQueryプラグインまとめのカルマ</title>
</head>
<body>
<h1>captallのデモでーす。</h1>
<img src="img.png" id="image" alt="キャプションだよー" width="300" height="250" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="jquery.captall-1.1.js"></script>
<script>
$(document).ready(function() {
$('#image').captall({
inTime: 500
});
});
</script>
</body>
</html>
スポンサーリンク