有名なJavaScriptのライブラリjQuery(ジェイクエリー) 」を使って、画像にマウスを合わせると画像の背景を暗くして(別に他の色でも良いが)コメントを表示させるスクリプトを紹介する。なお、jQueryをブログ等で利用する方法については、すでに様々なサイトで紹介されているのでここでは割愛させてもらう。
複数の画像を<ul>タグでリスト化して表示しているという前提で、
HTMLのheadもしくはbodyに以下のJavaScriptを記述
<script type="text/javascript">
$(function (){
$("li").hover(function(){
$(".layer", this).show();
},
function(){
$(".layer", this).hide();
});
});
</script>
.layerは画像に重ねる部分のclass指定。
今回はリスト化してある前提なので、<li>タグをスクリプト内で指定してあるが、例えばテーブル表示などでは<td>タグにすれば良い。
表示部分のHTMLは以下の通り。
<div>
<ul id="photograph">
<li>
<a href="http://www1.ocn.ne.jp/~daworks" target="_blank"><span class="layer"><p>こういう時のサンプル素材ってテーマがあるわけではないので何を選ぶか困ります。そういう意味ではこの文章も同じ。</p></span><img src="img/120530002.jpg" width="200" height="140" alt="サンプル" /></a></li>
</ul>
</div>
<ul>タグのid="photograph"は単に適用させる要素を指定しているだけなので、何でも良い。
ポイントは画像を<a>要素でネストして、その間にclass指定したspanで表示させたいテキストを記述すること。
次にスタイルシートの記述だが、少々注意が必要だ。まず先にサンプルを見て欲しい。
サンプルページへのリンク
透過処理以外のCSSの記述は以下の通り。
ul {
list-style: none;
}
#photograph a {
border:0;
display:block;
text-decoration:none;
position: relative;
}
#photograph img {
border-radius: 10px; /*画像の角を丸くする*/
}
.layer p { /*画像に重ねる文字の装飾*/
text-align:center;
color:white;
padding:0;
margin:10px;
}
肝心の透過処理でまず考えたのが、CSSの透過度を指定するopacity要素を利用する方法。
サンプルでは一番上の画像になる。具体的な記述は以下のようになる。
.layer {
text-align:center;
position: absolute;
cursor: pointer;
display: none;
width: 200px; /*重ねる画像の幅に合わせる*/
height: 140px; /*重ねる画像の高さに合わせる*/
border-radius: 10px; /*画像に合わせて背景の角を丸くする*/
/*ここから透過処理*/
background: #000;
opacity:0.50;
filter: alpha(opacity=50);
-moz-opacity:0.25;*/
}
しかし、この方法だとサンプルでもわかるように表示させる文字まで透過されてしまう。
そこで次にbackground-colorをrgbaで指定する方法。サンプルでは2番目の画像となる。
.layer {
text-align:center;
position: absolute;
cursor: pointer;
display: none;
width: 200px; /*重ねる画像の幅に合わせる*/
height: 140px; /*重ねる画像の高さに合わせる*/
border-radius: 10px; /*画像に合わせて背景の角を丸くする*/
/*ここから透過処理*/
background-color: rgba(50,50,50,0.5);
}
これで一応上手くいったが、
background-colorではなく、backgroundで指定する方法というのもあったので、ついでに試してみる(サンプル一番下)。
.layer {
text-align:center;
position: absolute;
cursor: pointer;
display: none;
width: 200px; /*重ねる画像の幅に合わせる*/
height: 140px; /*重ねる画像の高さに合わせる*/
border-radius: 10px; /*画像に合わせて背景の角を丸くする*/
/*ここから透過処理*/
background: rgb(0, 0, 0); /* IE6, 7向け */
background: rgba(0,0,0,0.5);
}
ブラウザによる表示の違いは各自で確認して欲しいが、結論を言うとOpera、FireFox,Google Chromeではすべて上記の通りの表示になったが、IEだけは
backgroundを使用した場合に限り、透過されずに黒一色で画像が見えなくなってしまった。
というわけで、現状では
background-colorをrgbaで指定する方法がベストと言える。
