»
Tiếng AnhTiếng PhápTiếng Việt

In - Ảnh tự động thay đổi kích thước - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Hình ảnh » Ảnh tự động thay đổi kích thước
URL: https://www.javascriptbank.com/automatic-image-resizer.html

Ảnh tự động thay đổi kích thước © JavaScriptBank.comVới hiệu ứng JavaScript này, bạn có thể làm tất cả các ảnh có nhiều kích thước khác nhau sẽ tự động chuyển sang một kích cỡ thống nhất khi người dùng nhấn nút. Nếu muốn, bạn có thể áp dụng hiệu ứng JavaScript này vào sự kiện onload nhằm mục đích cụ thể( như đối với các logo liên kết chẳng hạn).

Phiên bản đầy đủ: jsB@nk » Hình ảnh » Ảnh tự động thay đổi kích thước
URL: https://www.javascriptbank.com/automatic-image-resizer.html



CSS
<style type="text/css"><!--.simple {border: 1px solid #cccccc; padding: 5px; text-align: center}--></style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script type="text/javascript"><!-- Begin// Created by: Cat Arriola :: http://astrodiva.journalspace.comfunction fixImgs(whichId, maxW) {var pix=document.getElementById(whichId).getElementsByTagName('img');  for (i=0; i<pix.length; i++) {    w=pix[i].width;    h=pix[i].height;    if (w > maxW) {      f=1-((w - maxW) / w);      pix[i].width=w * f;      pix[i].height=h * f;    }  }}//--></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<BODY onload="fixImgs('photos', 108) /*('element ID', maximum width)*/"><table id="photos" cellspacing="2"><tr><td class="simple"><img src="astronaut.jpg" alt="photo 1"></td><td class="simple"><img src="backgr13.jpg" alt="photo 2"></td><td class="simple"><img src="backgr14.jpg" alt="photo 3"></td></tr><tr><td class="simple" colspan="3"><b>Live demo:</b> <input type="button" value="Make width 80 pixels" onclick="fixImgs('photos', 80)"></td></tr><tr><td align="center" colspan="3"><a style="font-size:12px; color:blue; text-decoration:none" href="http://astrodiva.journalspace.com/" target="offsite">C a t m a d e i t !</a></td></tr></table></body><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->