今日の人気記事

まだデータがありません。

マウスオーバーで画像にキャプションを表示「captall」

当ページのリンクには広告が含まれています。

スポンサーリンク

マウスオーバーで画像キャプションの表示を実装するプラグイン「captall」を紹介します。

jQueryプラグイン「captall」

このプラグインを使えば、画像タグのaltに指定したテキストを効果付きのキャプションに設定できます。

設定オプションは多岐にわたり、スライドなどの動き・色・位置・幅などなど……設定も簡単なので、画像キャプションにアクセントを付けたい場合には重宝するプラグインです。

スポンサーリンク

デモでは動作を確認してみてください。画像にマウスオーバーするとキャプションがアクション付きで登場します。

「captall」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)