D班勉強会
画像にマウスを載せた際に、半透明の説明を重ねる
「画像の上にマウスポインタが載せられたときにだけ、半透明の説明文(キャプション)がスライドして表示される」という方法です。
HTMLソース
まず、HTMLソースを以下のように記述します。ここでは、「画像」と「キャプション」を1つのボックス(div要素)内にまとめています。
<div class="PhotoBox">
<img src="****.jpg" width="365" height="243"
alt="******">
<div class="SlideBox">
<p class="Caption">キャプション</p>
</div>
</div>
このHTMLソースは、「外側のボックス(PhotoBox)」の中に、「画像」と、「スライドして表示させるキャプションのボックス(SlideBox)」が含まれる。キャプションが、div要素とp要素で二重のボックスに入っているのは、配置上の都合です。
上記のHTMLソースを、画像の個数だけ)列挙します。
CSSその１
画像を並べ、キャプションを半透明にして画像下部に配置します。
先ず、画像を並べて配置するため、「外側のボックス(PhotoBox)」に対して以下のようにスタイルを指定します。
div.PhotoBox {
float: left;
position: relative;
overflow: hidden;
margin: 0px 5px 10px 5px;
width: 365px;
height: 243px;
}
1行目：複数の画像を横方向に並べます。
2行目：このボックスを、「キャプションを配置するための基準」とします。
3行目：後続の「キャプションのボックス」を非表示にします。
4行目：隣接画像との余白量。
5行目：画像の横幅です。
6行目：画像の高さです。
CSSその２
次に、キャプション部分を画像の下部に配置するため、「キャプションを含めるボックス(SlideBox)」に対して以下のようにスタイルを指定します。
div.PhotoBox div.SlideBox {
position: absolute;
left: 0px;
top:243px;
width: 365px;
height: 20px;
background-color: black;
color: white;
opacity: 0.6;
}
1行目：絶対位置に指定。
2行目：キャプションの左からの位置 ０に指定
3行目：キャプションの上からの位置 画像の高さに合わせる
4行目：キャプションのボックスの横幅を指定 画像の横幅に合わせる
5行目：キャプションの高さを指定 表示したいキャプションの分量に応じて増減させる。
6行目：キャプションのボックスの背景色
7行目：キャプションのボックスの文字色
8行目：キャプションのボックスの透明度です。0が透明、1が不透明なので、その間の数値を指定する。
キャプション部分は、位置の指定で、画像の直下に配置し、overflowプロパティを使って見えなくしている。
ジャバスクリプト
スクリプトを使って、マウスポインタが画像の上に載せられたときにだけ、見えるようにする。
jQueryを読み込むスクリプト
<script type="text/javascript" src="jQueryのアドレス"></script>
スライドさせるスクリプト<script type="text/javascript">
$(function(){
$(".PhotoBox").hover(function(){
$(".SlideBox",this).stop().animate({top:"223px"},"fast");
},function(){
$(".SlideBox",this).stop().animate({top:"243px"},"slow");
});
});
</script>
2行目： 「画像が表示されているボックス(PhotoBox)」にマウスが乗ったとき
3行目： 「SlideBox」を、「画像の上端から223pxの位置」までスライドさせる。
スライドするアニメーションの速度は、「fast」の部分で指定している。「fast」、「normal」、「slow」を指定することが出来る。、
4行目： マウスが離れたたとき
5行目： 「SlideBox」を、「画像の上端から243pxの位置」までスライドさせる。
ここでは画像の高さが200pxなので、キャプションは下方向に移動し、CSS「overflow: hidden;」の指定で見えなくなる。