自動影像調整,建立影像縮圖
優點:不論圖檔大小尺寸,只要使用這組 javascript 程式,網頁內所有圖檔,都會產生同樣尺寸。
你可以使用滑鼠點擊這張圖檔,它會彈出一張原始大小的圖檔。
Auto Image Resize and create thumbs Auto Image Resize and create thumbs
Auto Image Resize and create thumbs Auto Image Resize and create thumbs
使用 javascript 程式如下:
<HEAD>
<script type="text/javascript">
function ResizeThem()
{
  var maxheight = 300;
  var maxwidth = 300;
  var imgs = document.getElementsByTagName("img");
  for ( var p = 0; p < imgs.length; p++ )
  {
    if ( imgs[p].getAttribute("alt") == "Auto Image Resize and create thumbs" )
    {
      var w = parseInt( imgs[p].width );
      var h = parseInt( imgs[p].height );
      if ( w > maxwidth )
      {
        imgs[p].style.cursor = "pointer";
        imgs[p].onclick = function( )
        {
          var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
          iw.focus();
        };
        h = ( maxwidth / w ) * h;
        w = maxwidth;
        imgs[p].height = h;
        imgs[p].width = w;
      }
      if ( h > maxheight )
      {
        imgs[p].style.cursor="pointer";
        imgs[p].onclick = function( )
        { 
          var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
          iw.focus( );
        };
        imgs[p].width = ( maxheight / h ) * w;
        imgs[p].height = maxheight;
      }
    }
  }
}
</script>
</HEAD>

<BODY onLoad="ResizeThem()">

<img src="pics/cube.jpg" alt="Auto Image Resize and create thumbs"/>
<img src="pics/tree.jpg" alt="Auto Image Resize and create thumbs"/>

</div>
</BODY>
本報導資料來源:DaniWeb IT Discussion Community

請按瀏覽器的檢視原始碼查看