画像をトレミング(切り抜き)する

 こんなことできるんですね。最近。サムネイル画像がただ単に縮小されているのではなくて元画像のトレミング(一部切り抜き)で表示できます。おまけにマウスを乗せると元の画像全体を表示するというものです。トレミングも端っこを切り抜いたり中央を切り抜いたりといろいろできます。

HTMLソース
<div class="asset-thumbnail">
      <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>
CSSソース
.asset-thumbnail {
    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;
}
不親切ですがいろいろやっているとわかると思うので値をいろいろ設定して試してみてください。Movable Typeのタグでも同様のことが可能です。
<mt:Entries lastn="100">
  <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>
ここではimgタグの中で高さ50pxを指定しています。小さなサムネイルとオンマウス時の元画像も縮小して表示されるので比較的見やすいかもです。





プロフィール



  • Name :: 山上オサム ♂(37)
  • Hobby :: 武術
  • Work :: Web Designer