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

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

使用方法
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>

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

sponsors

「ALTでキャプションをふわりと表示:jQueryプラグイン「jCaption」」をシェアする

記事作成:
記事URL:

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