4865 fans
1036 reader
122 followers

CSS Image Switcher

Publish by: Demon Warlock
In category: CSS/HTML
58 comments

Tutorial Details
Độ khó: Trung Bình
Thời gian: 14:00
File size: 232MB
Yêu cầu: Căn bản HTML & CSS

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.

Demon Warlock

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

http://design30s.com van tan

từ khi đi làm tời giò không có thời gian vô đây thăm bà con nữa, nhớ lại cái thời mới vô izwebz chả biết cài gì cả, mày mò cố gắng mới được, nhờ vậy mà đi làm tới hôm nay.
từ những kiến thức của anh DW mà mình làm được rất nhiều thứ, trong đó có trang http://aocuoikaka.com (chú ý trong phần photos hoặc hình ảnh ) hoặc trang http://cagiongthanhson.com trong phần sản phẩm.

sao anh không lập ra 1 quỹ đóng góp cho izwebz nhỉ? em ủng hộ cho. hay ít nhất cũng đăng quảng cáo lên cho a em click phụ cho. nếu đăng thì để trên cùng đi nha bác DM, đăng đi anh em ủng hộ cho. rất nhiều người muốn chia sẻ với anh lắm
Phan Nhâm Chính

anh ơi cho em hỏi caía cách mà khi di chuột đến ảnh mà nó zoom lên tại chỗ anh có thẻ cho thêm video đó vào đc không ah
Manh

e lam dc ruj,nhung .thay vi hover thi e cho no activited lun,y’ cua e la mun khi click vao tam anh nao thi no se xuat hien tren tam anh to ay ,dang nay khi click vao thi no van hien ra nhung vua thả chuột ra ruj lai tro ve tam hinh dau tien,.e dg xay dung website ban hang’,dung hieu hung nay de tiet kiem khong gian web,than thien vs nguoi dung,khi khach hang chon mon hang nao tu các ảnh nhỏ thì nó se phóng lơn hơn để xem cho dễ.Mong a Demon warlock giup e voi
khoat9999

cảm ơn anh nhiều ! Video rất chi tiết. Em cũng đang học web tìm thấy trang của anh quá hay!
đức pro

toàn mấy con gà ..!! ai cần học html pm G mail [email protected]….or yahoo anhvanconcodon_dl002 .. mình sẽ chỉ tường tận từng chi tiết 1 nhá..tks !!
- http://binhthuanvn.com Vũ Thanh Tiến
  
  Chào A Demon Warlock. E đang gặp khó khăn về phân trang với Jquery.
  A có thể làm một video về phân trang bằng Jquery được chứ?
  E cảm ơn A nhiều.
  Rất mong được sự giúp đỡ của A.
  E chào A.
- Đoàn Hưng
  
  Giỏi hơn ai mà kêu ng ta khác gà. ng ta gà nhưng ng ta có chí học sẵn sàng hỏi những j không biết mặc dù điều đó rất cơ bản. còn ông giỏi rồi vô đây làm chi nữa. vô đây nói ng khác gà hả một suy nghĩ của một kẻ tầm thường.
- newbie
  
  chung ta ko nen chap nhung thang ngu vi chung rat dong va nguy hiem
Hoàng Hải

alert(‘Nội dung bài rất hay’);
window.location.hreft=’http://chetnguoi.com’;
Phạm Hưng

anh DW ơi cho em hỏi trong css có viết chữ đè lên ảnh được không hay là phải cho ảnh background mới viết lên được. thank’s
thanhhan

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?
thanhhoai

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
- lusubu
  
  bạn cho thêm text vào thẻ a là được
Toàn

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!!!
- thanh
  
  Bạn up code lên đi mình xem có giúp được kô!
boy9x_siingle

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
http://giaiphapmo.net Quang Hùng

Hay thật,cảm ơn chú nhiều nha
dothuy

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 đó ?
thrall

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ẻ .
tuanbmt

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!
HuyDN

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
giap

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??
thinhtt

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.
CNC_Moonlight

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.
http://koco anhvan

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

Izwebz store

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.