CSS Image Switcher
- March 22, 2010
- 48 comments
Hôm nọ đi dạo dạo trên mạng và thấy được ở một trang web khác nó có cái hiệu ứng khi hover chuột qua một đường link thì hình ảnh ở trên thay đổi. Mà nó làm bằng Javascript. Tuy làm bằng Javascript thì hiệu ứng nó mượt mà hơn CSS, nhưng chỉ bằng CSS chúng ta cũng có thể tạo được hiệu ứng tương tự với Z-index và Absolute Position.
Trong bài này tôi sử dụng rất nhiều Absolute Position và Z-index. Nếu bạn chưa biết về 2 khái niệm này của CSS, bạn hãy xem lại 2 bài này để biết thêm chi tiết. Phần còn lại rất đơn giản. Tất nhiên đây chỉ là khung sườn thôi, bạn có thể thêm thắt hoa lá cành vào cho thêm đẹp và áp dụng vào nhiều project khác. Nếu bạn biết nguyên lý là vậy thì chỉ cần tư duy một chút là bạn có thể biến nó theo ý của mình.
Thời lượng: 14:00
Download định dạng .avi chất lượng cao: MediaFire Part 1, MediaFire Part 2
Chú ý: Bạn phải sử dụng Hjsplit để ghép 2 file lại với nhau.
Dung lượng: 232MB
anh DW ơi, cho em hỏi làm sao để mình đưa những ảnh nhỏ nó nằm trong cái anh lớn mà vẫn hiện thị ra vậy anh?
anh DW cho em hỏi cái này:khi mình hover qua mấy cái hình nhỏ cái hình lớn hiện lên đó, giờ em mún làm thêm cái text xuất hiện nửa, mỗi hình là 1 đoạn text khác nhau nó xuất hiện cùng với cai hình lớn lun.Giup em nghe cám ơn anh rất nhiều
bạn cho thêm text vào thẻ a là được
Em muốn hỏi anh Demon cái này!
_em có 1 cai div menu và 4 div hình ảnh(4 div này chồng lên nhau)
_em muốn hover qua từng menu con thì các div hình ảnh sẽ hiển thị lần lượt theo từng menu con đó! em đã làm đủ mọi cách nhưng vẫn ko dc.Phải chăng ở các div khác nhau thì sẽ không hover nhau đc!!!
Ví dụ:
#menu ul li#one:hover div#hinh1{
z-index:1000;
}
Mong anh phản hồi sớm! Và chúc anh luôn vui vẻ và mạnh khỏe!!!
Bạn up code lên đi mình xem có giúp được kô!
e rất hâm mộ anh demon!!
hy vọng a có nhiều tác phẩm hay hơn nữa. chúc sức khỏe a
Hay thật,cảm ơn chú nhiều nha
a Denom oi tại sao mà em đưa ảnh Flash lên Firefox được mà với IE 7 thì nó lại không hiển thị ?
Em cop code của 1 trang web trên mạng có ảnh Flash về máy chạy trên IE nhưng nó lại không hiểu thị ảnh như ở trang web đó ?
Làm thế này có sợ load ảnh lâu k anh . 1 site upload ảnh mà làm thế này thì sao được
.
Mà video của anh lỗi ảnh thứ 2 kìa
Thanks a đã chia sẻ .
Phải nói thật sự thì mình vừa làm quen với thiết kế web, mình đã cố tìm tòi các trang web để học và cho đến đêm qua, vô tình mò vào youtube và xem video tutorial của bạn Demon Warlock và biết đến trang izwebz. phải nói nó thật sự rất rất hay dành cho người Việt. Một lần nữa rất cám ơn bạn đã giành thời gian tạo nên các tutorial rất bổ ích, hi vọng là sẽ sớm có hàng triệu người việt biết bến izwebz
chúc bạn tốt công việc!
Anh ơi. Làm sao để click chuột vào nó mí phóng to ra được ạ. Chứ ko phải di chuột qua
Anh DW, cho em hỏi anh dùng phần mềm gì để Edit CSS ngay trên trình duyệt vậy??
anh DW ơi e đang tìm cách mình làm css động. ví dụ như là mình có thể kéo thả để định vị trí cho 1 đối tượng ngay trên trình duyệt mà ko viết trong file css. anh có thể gợi ý giúp em được ko.
Web anh hay lắm vào web anh nhiều rồi mà hnay mới có comment. Cám ơn anh nhiều.
Xem mấy đề mô của anh Dvv rất là huu dụng.Giúp ích rất nhiều cho việc làm chủ CSS.Rất quan trong! thanks bác nhiều lám.
giờ thì em đa hiểu tại sao mà lỗi font rồi .thui nha em làm webside đay.
pipi chúc a dw làm nhiều web hay nhe.có thi gửi cho em vao mail nhe