ホームページ作成/表示・非表示の切替 (HTML,CSS,JavaScript)

画像にマウスを載せた際に、半透明の説明を重ねる方法(3ページ目)

画像の上にマウスを載せたときにだけ、半透明の説明文(キャプション)が、アニメーション効果と共に下方からスライドして表示される、という表示効果の作り方をご紹介。jQueryを使って簡単に作れます。写真をたくさん並べて掲載するようなページで、デザイン面でちょっと凝ったことをしてみたい場合にお勧めです。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画像のキャプションをスライドして重ねるスクリプトを記述

最後に、JavaScriptソースを以下のように記述します。ここでは、jQueryを使っているため、jQueryの文法で記述しています。
$(function(){
   $(".PhotoBox").hover(function(){
      $(".SlideBox",this).stop().animate({top:"145px"},"fast");
   },function(){
      $(".SlideBox",this).stop().animate({top:"200px"},"slow");
   });
});
上記のソースでは、
  • 2行目: 「画像が表示されているボックス(PhotoBox)」に、
  • 3行目: マウスポインタが載ったときに、「キャプションを含むボックス(SlideBox)」をアニメーション効果と共にスライドさせて表示し、
  • 5行目: マウスポインタが外れたときに、「キャプションを含むボックス(SlideBox)」をアニメーション効果と共にスライドさせて消す
……という処理を実行しています。

画像サイズや好みに応じて修正する必要があるのは、3行目と5行目だけです。以下で、それぞれの行について、もう少し詳しく解説します。

3行目:スライドイン
$(".SlideBox",this).stop().animate({top:"145px"},"fast");
3行目は、キャプションのあるボックス「SlideBox」を、「画像の上端から145pxの位置」までスライド(アニメーション)する指定です。ここでは画像の高さが200pxなので、キャプションは(200-145=55で)高さ55pxほど表示されることになります。

また、スライドするアニメーションの速度は、「fast」の部分で指定しています。ここには、「fast」、「normal」、「slow」の種類を指定するか、または「アニメーション完了までの時間」をミリ秒で指定します。例えば、「2500」と記述すれば、2.5秒かけてスライド(アニメーション)されます。数値を記述する場合は、引用符は不要なので注意して下さい。

5行目:スライドアウト
$(".SlideBox",this).stop().animate({top:"200px"},"slow");
5行目は、キャプションのあるボックス「SlideBox」を、「画像の上端から200pxの位置」までスライド(アニメーション)する指定です。ここでは画像の高さが200pxなので、キャプションは下方向に消え去ることになります。これは、前ページのCSSソース(=A3部分)で、ボックスの範囲外にはみ出た内容は非表示になるよう記述してあるためです。

以上で、完成です。

※HTMLソース、CSSソース、JavaScriptソースを、別々に紹介してきたため、全体としてどう書けば良いのかが分かりにくかったかも知れません。その場合は、以下のサンプルページをブラウザで表示させて、ページのソースを見てみて下さい。すべての記述をまとめてあるので、どこに何を記述すれば良いのかがお分かり頂けるはずです。

マウスを載せるとキャプションがスライド表示するサンプルページ

サンプルページ

サンプルページ

これまでに記述したソースを合わせて表示した例は、右図の通りです。実際に動作を確認できるサンプルページを用意していますので、ブラウザで表示させてみて下さい。

サンプルページのHTMLソースには、CSS・JavaScriptのすべてのソースを直接記述してあります。コピー&ペーストして試してみて下さい。


 
今回は、「画像の上にマウスポインタが載せられたときにだけ、半透明の説明文(キャプション)がスライドして表示される」という表示効果の作り方をご紹介致しました。写真をたくさん並べて掲載するようなページで、ぜひ、活用してみて下さい。


 
【関連記事】

【編集部おすすめの購入サイト】
Amazon でホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます