ตัวอย่าง

Js:
$(document).ready(function(){
$(’img’).each(function(){
$(this).wrapAll(’<div class=”img-container”></div>’).after(’<span class=”img-name”>’+$(this).attr(’title’)+’</span>’);
});
});

Css:
.img-container {
float: left;
position: relative;
}
.img-name {
position: absolute;
bottom: 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
color: #000000;
background-color: #E0DFE3;
opacity:0.65;
width: 100%;
}
.shwTitle {
display: block;
}

Html:
<img src=”http://jquery.com/images/bibeault_cover150.jpg” class=”shwTitle” title=”jQuery in Action” />
<img src=”http://jquery.com/images/book-learning.png” class=”shwTitle” title=”Learning jQuery Book” />

หลักการคือ

เราจะให้ทุกๆ <img/> ที่มี class=img-container แสดงแถบ title ที่ท้ายรูป

โดยเพิ่ม html node ใหม่ที่เอาไว้ใช้เก็บ title ของรูป
ใช้ $(this).attr(’title’) เรียกค่าของ attribute “title”
ใช้ .after() เพื่อเพิ่มแถบ title ของรูปที่เราเพิ่งจะเรียกมา

และนำ <div> ไปครอบ <img>+แถบ title ที่เพิ่งสร้าง
ใช้ .wrapAll(’<div></div>’) เพื่อนำ div ไปครอบ

ส่วน CSS จะไม่ขออธิบายครับ *-*
ลองดูๆ

Share/Save/Bookmark

เรื่องที่เกี่ยวข้อง