3/3 画像にマウスを載せた際に、半透明の説明を重ねる方法 [ホームページ作成] All About

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

最後に、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のすべてのソースを直接記述してあります。コピー＆ペーストして試してみて下さい。

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

【関連記事】