自動影像調整,建立影像縮圖 |
優點:不論圖檔大小尺寸,只要使用這組 javascript 程式,網頁內所有圖檔,都會產生同樣尺寸。 你可以使用滑鼠點擊這張圖檔,它會彈出一張原始大小的圖檔。 |
![]() ![]() |
![]() ![]() |
使用 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 |
請按瀏覽器的檢視原始碼查看