CSS คลิกเพื่อดูภาพที่ใหญ่ขึ้น

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

GoB
PHP Super Member
PHP Super Member
โพสต์: 212
ลงทะเบียนเมื่อ: 12/01/2015 10:14 am

CSS คลิกเพื่อดูภาพที่ใหญ่ขึ้น

โพสต์ที่ยังไม่ได้อ่าน โดย GoB »

CSS คลิกเพื่อดูภาพที่ใหญ่ขึ้น

ปกติแล้วภาพบนหน้าเว็บ ขนาดของรูปภาพจะไม่ใหญ่ เราจึงจะมาเพิ่มลูกเล่นให้กับภาพ ซึ่งวิธีนี้เมื่อนำเมาส์ไปคลิกที่ภาพ จะสามารถดูภาพที่มีขนาดใหญ่ขึ้นได้

ตัวอย่างโค้ดที่เขียน

โค้ด: เลือกทั้งหมด

<html>
<head>
<style>
div.img {
    margin: 5px;
    padding: 5px;  //ระยะห่างของรูปภาพ ภายในกรอบ
    border: 1px solid #0000ff;  //ความหนาและสีของเส้นกรอบ
    height: auto;  //ความสูง ตั้งอัตโนมัติ
    width: auto;  //ความกว้างตั้งอัตโนมัติ
    float: left;  //จัดให้ชิดซ้าย
    text-align: center;  //จัดรูปภาพให้อยู่ตรงกลาง
}	
div.img a:hover img {       //เมื่อเอาเมาส์ไปวางภาพจะขยาย
    border: 1px solid #0000ff;
}
div.desc {
  text-align: center; 		 //จัดข้อความให้อยู่ตรงกลาง
  font-weight: normal;  	//ขนาดตัวหนังสือ
  width: 120px; 		 //ความกว้างตัวอักษร
  margin: 5px; 		 //ระยะห่างของข้อความทั้งสี่ด้าน
}
</style>
</head>
<body>
<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>  		 //ส่วนของรูปภาพ
<div class="desc">ดูภาพขนาดใหญ่</div>    	// ส่วนของข้อความ
</div>
</body>
</html>
ผลลัพธ์ทีได้
ก่อนคลิกภาพ
11.jpg
11.jpg (12.11 KiB) Viewed 5897 times
หลังจากคลิกภาพ(ภาพมีขนาดใหญ่ขึ้น ตามที่กำหนดไว้)
2.jpg
2.jpg (31.24 KiB) Viewed 5897 times

บทความที่เกี่ยวข้อง

CSS การใส่สีให้เส้นขอบตาราง
CSS เพิ่มลูกเล่นให้กับรูปภาพ

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 62