ALTでキャプションをふわりと表示：jQueryプラグイン「jCaption」

画像にキャプションをつけることは多いと思います。
でも、みんなと同じような見せ方は嫌だという方には、こんな方法もあります。
jQueryプラグイン「jCaption」はaltに記述したものを画像の上に乗せて表示できます。

使用方法

jCaptionからjcaption.min.jsを、jQueryからjquery.jsをダウロードします。


<style>
img {border:none;}
div.caption {margin: 0;padding:0;position: relative;}
div.caption p {position: absolute;margin: 0; padding: 2px;font-size: .9em;bottom: 0;left: 0;background:black;color: white;opacity: .7;}
div.caption img {margin: 0; padding: 0;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jcaption.min.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
	$('img').jcaption({
		copyStyle: true,
		animate: true,
		show: {height: "show"},
		hide: {height: "hide"}
	});

});
</script>

あとは、以下のように記述すると完成です。


<div id="demo"><img src="画像パス" alt="キャプション" /></div>

サンプル

Javascriptサンプルページ一覧

skuare.net