● 内容
① 背景画像にカーソルを乗せた時に文字列を表示させる。
② 背景画像にカーソルを乗せた時に同時に画像の透過度を変える。
● 実例
グリッド内の文字表示①
表示のテスト１
表示のテスト１
グリッド内の文字表示②
表示のテスト２
表示のテスト２
● 設置方法
① フリープラグインへ追加
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.grid >').hover_disp();
});
</script>
② ＣＳＳへ追加する（例）
注意：field01 field02 と分けているのは、field01 field02の画像の大きさが
異なるケースがあるので、分けています。
同じ画像の大きさであれば、両方の画像ともに、field01で問題ありません。
尚、③の部分も同じ理由です。
.field01 .grid{ /* フィールド１ */
width:481px; /* 幅 */
height:318px; /* 高さ */
display:block;
background-image: url(画像のＵＲＬ);
background-repeat:no-repeat; /* 繰り返ししない */
background-position:center center; /* 中央 */
}
.field02 .grid{ /* フィールド２ */
width:481px; /* 幅 */
height:326px; /* 高さ */
display:block;
background-image: url(画像のＵＲＬ);
background-repeat:no-repeat; /* 繰り返ししない */
background-position:center center; /* 中央 */
}
.opacityset{ /* 背景画像の透過度 */
filter: alpha(opacity=60); /* 透過度 IE */
opacity:0.6; /* 透過度 */
}
.grid .hovered{ /* カーソルを乗せた時の文字部分 */
filter: alpha(opacity=100) !important; /* 透過度 IE */
opacity:1.0 !important; /* 透過度 */
}
.grid .view_area{ /* カーソルを乗せる前の文字部分 */
filter: alpha(opacity=0); /* 透過度 IE (非表示) */
opacity:0.0; /* 透過度 (非表示) */
width:100%; /* 幅 */
height:100%; /* 高さ */
position:relative; /* 相対配置 */
top:0px; /* 上からの位置 */
left:0px; /* 左からの位置 */
font-size:28px; /* 文字の大きさ */
z-index:10; /* 優先度 */
background-color:transparent; /* 背景色(透明) */
color:#ffffff; /* 文字の色 */
}
.grid .view_area a{ /* カーソルを乗せる前の文字部分(リンク) */
text-decoration:none; /* 装飾なし */
color:#ffffff; /* 文字の色 */
font-size:42px; /* 文字の大きさ */
}
③ 記事やメッセージボードの書き方（ＨＴＭＬモードで書く）
<div class="field01">
<div class="grid"><div class="view_area">グリッド内の文字表示①<br />
<a href="#">表示のテスト１</a>
</div>
</div>
</div>
<br>
<br>
<div class="field02">
<div class="grid"><div class="view_area">グリッド内の文字表示②<br />
<a href="#">表示のテスト２</a>
</div>
</div>
</div>
<br>
<br>
● JavaScript の内容
// hover_disp
$.fn.extend({
hover_disp:function(){
$(this).hover(function(e){
$(this).addClass("hovered");
$(this).parent().addClass("opacityset")
},function(e){
$(this).removeClass("hovered");
$(this).parent().removeClass("opacityset")
});
}
});
● code.google.com
http://code.google.com/p/newblue/source/browse/hover_disp.css
http://code.google.com/p/newblue/source/browse/google_search_box.js
http://code.google.com/p/newblue/source/browse/hover_disp.html