こんなことできるんですね。最近。サムネイル画像がただ単に縮小されているのではなくて元画像のトレミング(一部切り抜き)で表示できます。おまけにマウスを乗せると元の画像全体を表示するというものです。トレミングも端っこを切り抜いたり中央を切り抜いたりといろいろできます。
HTMLソース
HTMLソース
<div class="asset-thumbnail">CSSソース
<a class="asset-image" href="http://www.omnioo.com/omnioolab/1.html">
<img src="./image/photo1.jpg" class="asset-thumb" />
</a>
<a class="asset-image" href="http://www.omnioo.com/omnioolab/2.html">
<img src="./image/photo2.jpg" class="asset-thumb" />
</a>
...続く
</div>
.asset-thumbnail {不親切ですがいろいろやっているとわかると思うので値をいろいろ設定して試してみてください。Movable Typeのタグでも同様のことが可能です。
float:left;
margin:3px;
}
.asset-thumbnail a {
display:block;
float:left;
width: 50px; ←ここらで調整
height:50px; ←ここらで調整
overflow:hidden;
position: relative;
z-index:1;
}
.asset-thumbnail a img.asset-thumb {
float:left;
position:absolute;
top:0px; ←ここらで調整(マイナスの値も指定できます。)
left:0px ←ここらで調整(マイナスの値も指定できます。)
}
.asset-thumbnail a:hover {
overflow:visible;
z-index:1000;
border:none;
}
<mt:Entries lastn="100">ここではimgタグの中で高さ50pxを指定しています。小さなサムネイルとオンマウス時の元画像も縮小して表示されるので比較的見やすいかもです。
<mt:EntryAssets lastn="1" type="image OR video">
<div class="asset-thumbnail">
<a class="asset-image" href="<$mt:EntryPermalink$>">
<img src="<$mt:AssetThumbnailURL$>" height="50" class="asset-thumb" alt="<$mt:EntryTitle$>" title="<$mt:EntryTitle$>" />
</a>
</div>
</mt:EntryAssets>
</mt:Entries>



