PDA

View Full Version : Hiện các tính năng khi di chuột vào ảnh



langtulongquan
23-01-2010, 18:10
Các bác cho em hỏi, dùng code nào để có tính năng giống như ảnh bên dưới. Em cảm ơn nhiều ạ

http://hdtera.com/Photos/100115_requirement_80.png

hakara
25-01-2010, 10:04
cái dấu cộng
bạn đặt 1 thẻ <i> bên cạnh thẻ <img> của bức ảnh bên trong thẻ <a> của link
HTML
<a href="..." class="plus">
<img src="...">
<i />
</a>
sau do ban dinh nghia css nhu sau
a.plus i {
background:url(url cua hinh dau +) no-repeat top;
width:50px;
height:50px;
position:absolute;
top:0;
left:0;
display:none;
}
a.plus:hover i {
display:block;
}
Phần mô tả phim bạn cũng làm như vậy nhưng thay <i /> bằng
<u> Nội dung text </u>
sau đó bạn định nghĩa lại thuộc tính top và left cho thẻ <u> trong css
Phần thanh ngang ở cuối
HTML
<div id="bottom-foot">botton</id>
css cho no
div#bottom-foot {
position:fixed;
right:0;
bottom:0;
width:100%
}
Chúc thành công