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
sao trên ie lai không đọc được một đoạn văn bản no như bi lỗi font ý ?nhưng đoạn văn bản đó lại đọc được trên filrfox em muốn các anh sửa giúp em .em cám ơn ai nói cho em cách sửa nhé.thanks
cảm ơn anh nhiu nhiu video rất hay và rất bổ ích em ới ứng dụng nó vào đồ án của mình
Chào anh DW,em là lập trình viên,nhưng kiến thức web hơi bị kém,tốt về lập trình window thôi,em thấy cái absolute và relative + float rất hay nhưng em thấy trên trang của anh có 1 lỗi mà em đang gặp phải,mong anh giải thích hộ nhé !
hôm nay 19/10/2010,vào web như thường lệ,1-2 ngày 1 lần
em thấy con nhện phía bên dưới hình,anh để là absolute,và cái footer cũng vậy,nhưng khi thu nhỏ trình duyệt thì thấy nó bị canh về phía bên trái,nghĩa là cái footer nó chèn qua phía bên trái 1 khúc rồi .
em thực hành trang của em cũng làm absolute,bên trái là logo (chừng 300 px),bên phải là 1 cái container (hình) rất lớn,khoảng 650 px,absolute ,right : 0px,vậy thu nhỏ trình duyệt nó vẫn nằm bên phải,và nó che mất cái logo bên trái
Anh DW ơi!em giờ bắt đầu tìm hiểu về css.cho em hỏi anh đang dùng phấn mềm gi để viết code vậy.và anh cỏ thể hướng dân bọn em cách dùng phầm mền đó được không
Em moi duoc hoc web, nen hom nay em moi tim duoc trang web nay, no rat co ich cho em.dac biet la cac bai giang cua anh no rat hay.cam on a nhieu nha.hom nay em co thac mac:lam the nao ma khi minh click vao tag, tren menu thi noi dung cua no se hien o duoi, ma ko doi qua trang khac?
anh co the huong dan cach viet code css tren fire fox dc ko? em lam thu ma ko biet cach
Anh DW ơi, em mới vào nghề web. Tình cờ biết được izwebz, quả thật các bài viết của các anh thật có giá trị và bổ ích vơi em. Em xem xong video switcher images, làm theo chạy trên localhost thì được, UP lên host chẳng hiểu sao lại không chạy, lạ quá, anh xem giup em ở web: nghetohe.co.cc với.
àh có điều lạ là khi em làm giống y hệt anh thì chạy trên ie thì chạy được 3 hình ở bên phải, còn 3 hình bên trái thì không hoạt động. Sau đó em chuyển 3 hình ở bên trái với position left -> right thì chạy ok. Đưa lên host chạy thì thui rui, chẳng có gì xảy ra. Mong các anh giúp em…hihihi…….
Cái hiệu ứng này cũng giống kiểu như ở cái yahoo! tin tức (khi mình vừa đăng nhập yahoo messager, thì nó xuất hiện cùng) đúng ko nhỉ
cái video nay hay thiệt
cám ơn anh nhé!
anh chỉnh lại font chữ đi chứ ko đọc được,bị lỗi font
anh DW oi,em la sinh viên hiện đang làm bài thực tập về đề tài web,em muốn tạo menu left thuộc dạng đa cấp anh co thể chỉ dùm em được không anh.
thanks. bac that pro
cảm ơn anh nhiều vì những video bổ ích này.
bài hướng dẫn thật thú vị,em cũng đã từng làm web.
anh có thể làm 1 video giới thiệu về mô hình 3 tầng qua những ví dụ củ thể đc ko
Check lại multilmedia player của bạn đi
anh DW oi, sao em download file clip về mà mở lên toàn nghe tiếng không! không có thấy hình dậy?
Anh làm ơn giải thích giúp em tại sao khi hover đến cái cái ảnh thứ 2 thì nó cứ hiện lên cái ảnh thứ 4(con ếch)???
thanks..hay lam’…pro co’ gang up len nua~ nhe’…
http://code.google.com/p/quake2-gwt-port/
Google đã phát triển game Quake II trên nền web HTML5 kìa anh DW ơi.
Mong series về HTML5 của anh quá cơ
@dangnam mình thấy ngoài là thứ không thể vứt bỏ nếu bạn dùng windows còn ngoài ra mình chẳng thấy cái gì tốt của IE cả có thể mình hơi bị chủ quan nhưng nghĩ mà xem những thứ được gọi là mới cần hỗ trợ thì IE lại coi là đồ nên bỏ và tỏ ra khó tính. còn những thứ đáng bỏ thì IE lại giữ lấy làm của riêng. Liệu có ai đồng ý một trình duyệt mà những cái nó có thì những cái khác nhiều hơn gấp đôi không. Và liệu những người biết có nên dùng IE thêm…. hay bạn hãy tạo lối đi riêng….
E đã xem khá nhiều Video của bác DreamWeaver và áp dụng được nhiều trong Project vừa qua. Cám ơn bác về các bài học bổ ích
.
thôi bạn ạ mình nghĩ bạn nên chọn defaul trình duyệt là FF hoặc chrome đi chứ IE có 8 hay 9 đi nữa chúng mình cũng chẳng chạy trên nó.biết đâu đấy 10 mình sẽ dùng
đứa con bị bỏ rơi ấy tốt nhất là bỏ qua.
móc mói tìm tòi rồi abc rách nó thôi. nghèo khổ thế đấy 
cám ơn DW đã giới thiệu WS này công nhận là nó gây nghiện 
hè hè cái webstorm này ngon ra phết em dùng công nhận ham không biết bao giờ mới thu tiền. Nhưng chắc không mua
@Vankien: nếu bạn thích học C++ có gì pm mình mình send tài liệu cho… mình nhiều tài liệu C++ lắm tiếng Nga cũng có, trung quở … đủ các thứ tiếng bạn nhé.
Hừm! ‘Đứa con bị bỏ rơi’
Nó có nhiều đặc điểm cũng tốt lắm, và cũng không đến nỗi tồi thế đâu. Nhiều khi code css sai, trên ff vẫn bao biện cho bạn nhưng IE thì không, bác này rất khó tính.
Hình như là… Nó không run trên IE… Vấn đề gian khổ nhất của những người thiết kế web.
Internet Explorer Version 8.0
Bạn phải nhấn phím Tab thì mới được. Gõ xong rồi Tab một cái.
Sao em cũng dùng trình soạn code Webstorm mà em làm z không được z anh ^^
bác DW ơi
chứ cái này làm từng ảnh như thế này có cách nào mà load từ CSDL vào ko
Oài! lại hỏi kiểu này nữa, thiệt tình
. CSDL thì cơ sở dữ liệu thôi. Dùng vòng foreach trong PHP rồi dùng câu lệnh truy vấn sql thì sẽ hiển thị được thôi đó mà. Còn làm ntn thì phải tùy vào từng database của từng người.
@Demon Warlock : Cám ơn anh về ý tưởng tạo ra 1 trang Web hay thế này. Mình nghĩ rằng giờ những ai đang học Web hay đang muốn tìm hiểu mà bỏ qua trang Web này thì thật là phí
@wildhorse: Đấy là tính năng của trình soạn code Webstorm thôi. Nó tích hợp zend coding trong đó.
@van kien: C++ là một lĩnh vực lập trình khác. Tuy cú pháp của C++ với PHP rất giống nhau, nhưng Izwebz chuyên về lĩnh vực thiết kế và phát triển web cho nên anh nghĩ làm các video về C++ là không thực tế.
Chào anh!
Mặc kệ đi mở thêm chuyên mục cũng đâu có sao, để học tập.
Mong anh sẽ mở thêm dạy C++ nữa
Chúc anh vui vẻ
huynh yên tâm đi..đệ giới thiệu rồi..
nhưng có điều hôm nay vừa ăn cơm vừa xem tutorial mà huynh lại nói : cái gì đó ” ghẻ, ghẻ” nên đành bỏ rở bát cơm….
trong này mà có video tutorial về C++ thì hay biết mấy…không biết huynh có thể chuyển lời đến bác Cờ -lát- ken-sờ- chuối làm vài video về C++ không..được như thế thì đệ đảm bảo trong 1 tuần cả lớp QL091 của em sẽ vô trang của huynh…
nếu mà được bác Cờ -lát- ken-sờ- mít..đòng ý thì cho cái video về C++ nâng cao luôn cũng được…một lần nữa rất hài lòng về video… tuy không phải chuyên nghanh nhưng biết thêm thì cũng hay hay…
Trong tutorial này em thấy anh DW ghi đoạn code div#wrapper>ul#switcher>li*6>a.link> và ấn thêm phím gì đó và nguyên 1 đoạn code hoàn chỉnh hiện ra…Anh làm cái đó sao dzay ^^