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

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

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

GoB
PHP Super Member
PHP Super Member
Posts: 212
Joined: 12/01/2015 10:14 am

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

Post by GoB » 23/02/2015 4:09 pm

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

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

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

Code: Select all

<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 3265 times
หลังจากคลิกภาพ(ภาพมีขนาดใหญ่ขึ้น ตามที่กำหนดไว้)
2.jpg
2.jpg (31.24 KiB) Viewed 3265 times

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

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

Return to “CSS Knowledge”

Who is online

Users browsing this forum: bankjittapol and 7 guests