Resize รูปด้วย Java Script
December 22, 2007 – 11:24 pmพอดีว่างๆ จากการทำงาน เปิดเว็ปเล่นครายเครียด ไปสักพักไปเจอเว็ปบอร์ดแห่งนึง มันเปนบอร์ด….. ไม่บอกนะ อิอิ คือเวลาเปิดเข้าไปถ้ามีคนโพสรูปมาใหญ่ๆ มันจะโหลดๆๆๆ สักพัก พอโหลดเส็จรูปนั้น อ๊า~ กลับหดเล็กลงเท่าขนาดของบอร์ด ทำให้บอร์ดไม่เสียรูปทรง โอ๊ววว เจ๋ง!เมื่อหายเครียดสักพักเรามาเริ่มเครียดกันต่อดีกว่า อยากรู้จริงๆ ทำไมน๊า ไอ้รูปนี่มันหดได้ 5555+ เลยต้องขอลอง แคะ แงะ แกะ เกากันหน่อยล่ะ เอ้า view source ดูสะหน่อย มันต้องมีอะไรในกอไผ่สิ จริงมะ สักพักก็ได้เรื่อง โอ๊ะ เจอ java script ตัวนึง….
เอ้ามาต่อกัน พอดีเจอจาวาตัวนึงมันสะดุดตา มากกกกกกก เลยรู้วิ ธีใช้มาละ เรามาดูกัน
<script language="javascript">
var MAXWIDTH = 500;
var MAXHEIGHT = 500;
function autosize(SENDER)
{
W = SENDER.width;
H = SENDER.height;
ratio = W/H;
ratioC = MAXWIDTH/MAXHEIGHT;
if(W>MAXWIDTH || H>MAXHEIGHT)
{
if(ratio>ratioC) { SENDER.width = MAXWIDTH; } else { SENDER.height = MAXHEIGHT; }
SENDER.style.cursor = 'hand';
SENDER.onclick = function(){window.open(SENDER.src);};
}
}
</script>
นี่ไง เจ้านี่ล่ะ เหตุของความหด 555 ใครอยากลองเอาไปใช้ได้เลยง่าย ไม่ต้องมาเขียน php รีไซรูปย้ายไปเกบในโฟลเดอร์อีกต่อไปแร๊ว วิธีใช้คือก๊อปไอ้เจ้าโค้ดด้านบนไปใส่ไว้ใน แท๊ก <head></head> นะ ส่วนวีธีดึงมาใช้นั้น แสนง่าย ตรงโค้ดที่จะให้แสดงผลรูป เราแค่เพิ่ม
<img src="ที่อยู่ของรูปภาพ" onload="autosize(this)">
เข้าไป แค่นั้นเองง ง่ายม๊ะ ส่วนใครอยากปรับเปลี่ยนขนาดรูป ก็มาเปลี่ยนในแท๊กนี้เลย
var MAXWIDTH = 500;
var MAXHEIGHT = 500;
ตามใจชอบเลยจ้า
Leave a reply