• 4865 fans
  • 1036 reader
  • 122 followers
CSS Image Switcher
  • 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 Website facebook twitter user_email

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
    • 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 :D .
    Mà video của anh lỗi ảnh thứ 2 kìa :D

    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à hu­u 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
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.

Izwebz facebook group

Social connect

Recent Comments

Archives