画像の上にマウスカーソルを移動した際に、キャプション(説明文)などが表示されるのを見かけたことはありませんか?ネットショップではよく見かける見せ方ではないでしょうか。商品画像だけを並べておいて、画像の上にマウスカーソルが来た際に「商品名」「キャッチコピー」「価格」など表示するのに利用されているのをよく見かけますね。スライド、フェードも可能「mosaic.js」でも同様の仕組みについて紹介しました。本日紹介する方法の方がもっとシンプルな実装になると思います。HoverCap」jquery-hovercapより、赤枠のボタンをクリックしてファイルをダウンロードしてください。ダウンロードしたファイルの中から「jquery.hovercap.js」を使います。http://jquery.com/よりjquery.min.jsもダウンロードしてください。sample1.html1行目、2行目でjquery関連のファイルを読み込んでいます。パスは各自の保存場所に合わせてください。このサンプルは、htmlファイルと同一フォルダにjquery関連のファイルがある状態です。3行目から23行目がCSSに関する記述をしています。5,6行目:表示する画像サイズに合わせて調整してください。11から21行目がキャプションに関する記述です。背景色、透過や文字色などはここで調整可能です。25から61行目で動作を設定している部分です。記述が長くなっていますが複数の動きを設定しているため長くなっています。実際に利用する際には動作設定も絞って設定すると思います。‘.example__caption’});上記が1つのブロックに対する設定です。このサンプルではjs–hovercap01からjs–hovercap06までの6つのブロックに対する設定をしています。‘fade’});オプションなど指定する場合は、「,」で区切って設定します。.js–hovercap01や.example__caption部分はhtmlのclass名を指定している部分なのでCSSも含めて名前を揃えて調整してみてください。63から91行目がhtmlの記述です。このサンプルでは6つのブロックを用意しています。それぞれ、異なるclass名になっています。実際には動きなどを1つ決めて設定することが多いと思いますのでクラス名も統一されるかと思います。クラス名:example__captionというシンプルな構造です。キャプション部分には文字だけではなく、画像などレイアウトすることも可能なので工夫次第では面白い見せ方がで出来そうです。動作サンプル実装は非常に簡単ですので、ぜひ活用してみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。コメントデータの処理方法の詳細はこちらをご覧ください。万が一問題があればご連絡ください。