サンプル
クリックされたくない画像のブロックにも使えますねｗ
前回の記事では色々と問題も残ったままだったり、間違ってたりしたので修正。
おそらく今回のもので大体おＫだと思います。
折りたたむ
|
<script src="http://blog-imgs-32.fc2.com/d/i/s/dispersalblog/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
links = $$('.screenshot');
toggles = $$('.rating');
togs = {};
links.each(function(el, idx) {
togs[idx] = new Fx.Styles(toggles[idx], {duration:500, wait:false});
el.addEvent('mouseenter', function(){ togs[idx].start({ 'bottom': 0 }); });
el.addEvent('mouseleave', function(){ togs[idx].start({ 'bottom': -165 }); });
//キャプションの枠の高さより15ほど大きい値
});
});
</script>
<style>
/* 画像の入る枠の設定 */
.screenshot {
position:relative;
overflow:hidden;
width:362px;
height:390px;
z-index:1;
margin-bottom:0px;
margin:0;
background-color:#fffff ;
border:1px solid #7C7C7C ;
padding:0px;
font-family:Tahoma,Verdana,Arial,sans-serif;
font-size:12px;
font-style:normal;
}
/* キャプションの入る枠の設定 */
.rating {
left:0px;
position:absolute;
background: #111;
-moz-opacity:.60;
filter:alpha(opacity=70);
opacity:.55;
bottom:-165px;
background-color:#555555 ;
margin-left:0px;
margin-bottom:0px;
padding:2px 0 0 6px;
display:block;
cursor:pointer;
width:362px;
height:150px;
overflow:hidden;
}
/* キャプションの設定 */
.thumbnail span {
display:block;
color:#ffffff;
text-align:left;
}
.thumbnail a {
color: #009900!important;
}
.thumbnail a:hover,.contentInside a:hover {
text-decoration:underline;
color:#FF0000!important;
}
</style>
<div align="center">
<div class="thumbnail">
<div class="screenshot">
<img src="画像のパス" width=" " height=" ">
<div class="rating">
<span>
キャプションを入れます
</span>
</div>
</div>
</div>
</div>
|
公開しているソースは自分が後で使用するためのものです。ただ、設置しようとして分からなくなった場合、より多くのサンプルソースがあったほうが良いと思いますので、公開しております。
テーマ : ★★おすすめ♪★★ - ジャンル : ブログ
タグ : mootools 画像ギャラリー系
2008/12/23 18:15 |
何でも挑戦！ブログカスタム
| COMMENT(0)
| TRACKBACK(0)
TOP
トラックバック Trackback URL
この記事にトラックバックする(FC2ブログユーザー)