ปกติแล้วภาพบนหน้าเว็บ ขนาดของรูปภาพจะไม่ใหญ่ เราจึงจะมาเพิ่มลูกเล่นให้กับภาพ ซึ่งวิธีนี้เมื่อนำเมาส์ไปคลิกที่ภาพ จะสามารถดูภาพที่มีขนาดใหญ่ขึ้นได้
ตัวอย่างโค้ดที่เขียน
โค้ด: เลือกทั้งหมด
<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>
ก่อนคลิกภาพ หลังจากคลิกภาพ(ภาพมีขนาดใหญ่ขึ้น ตามที่กำหนดไว้)
บทความที่เกี่ยวข้อง
CSS การใส่สีให้เส้นขอบตาราง
CSS เพิ่มลูกเล่นให้กับรูปภาพ