Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[Xin hướng dẫn] Code cho background khi hover vào

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi kietluan75, 27/3/13.

Lượt xem: 4,320

  1. kietluan75 Mới đăng kí

    Em có ý tưởng làm web bán quần áo như sau : Trang chủ khi vào thì có menu top với hình toàn thân người :


    Cho em xin hình luôn ạ , em kiếm mãi chẳng đc như ý muốn :



    ...
  2. TOMMYH167

    TOMMYH167 Thành viên cấp 3

  3. kietluan75

    kietluan75 Mới đăng kí

    Em cần hướng dẫn mà
  4. MioDung

    MioDung Thành viên cấp 3

    bác nói một thôi một hồi mà chả hiểu gì ?? nói rõ hơn xem nào, cho ví dụ 1 cái khác đi, cái link trên ko chạy

    khi hover vào áo khóa có hiệu ứng hiện ra như thế nào ??? :|hả bạn ,, giống 123mua ko? ?
  5. kietluan75

    kietluan75 Mới đăng kí


    Tại chưa đủ post nên ko đưa link trực tiếp đc.
    Còn ý của em thế này : cái content có background hình người từ đầu đến chân, mặc áo khoác + nón + giày + áo trong ( sơ mi or thun ). Khi rê chuột vào phần nào thì phần đó nổi lên ( hover ) . Ví dụ khi rê vào áo thun thì nó hơi zoom lên + có border. Cái khó là em ko biết làm sao cho hình canh chính xác (1 hình bg & các hình từng phần bg) nên muốn xin cái clip hướng dẫn. À em chưa biết jquery nhá.

    Cho em xin cái hình luôn ạ, kiếm mãi ko đc . Hình CR7 thì góc nhìn ko ổn
  6. kietluan75

    kietluan75 Mới đăng kí

    Web có 3 phần : header - content - footer
    Ở đây em nói phần content có hình toàn thân 1 người ( nam hoặc nữ, mặc áo quần giày ), khi mà rê chuột vô phần áo thì nó nổi lên hay phần áo đc zoom lên ( hover ), khi click vào thì sẽ chuyển sang trang tương ứng ;quần và giày cũng thế.

    Ý tưởng của em chỉ có vậy thôi, mà em ko biết làm sao để làm đc. Ai biết thì cho em xin cái clip demo phần áo hay giày = css ạ. Em chưa học jquery
    iTD thích bài viết này
  7. kietluan75

    kietluan75 Mới đăng kí

    Cho xin clip demo đi bạn
  8. kietluan75

    kietluan75 Mới đăng kí

    Có ai biết giúp em với
  9. Thạch Phạm

    Thạch Phạm Thành viên cấp 1

    Bạn nên tìm hiểu về jQuery trước khi xin clip demo nhé.
  10. kietluan75

    kietluan75 Mới đăng kí

    Để làm đc thì mình đc một bạn nói là có 2 cách, 1 = css - 2 = jquery
    CSS thì mình đc hướng dẫn sơ qua là dùng 1 hình làm background, 1 hình cắt từng bộ phận gắn vào thẻ <a>, cái chính là mình chưa biết làm sao để canh cho chính xác
  11. Shinigamj

    Shinigamj Thành viên cấp 1

    cái này cũng đơn giản, mình chỉ hướng dẫn còn clip demo thì hok có .
    tạo 1 <div class="items"> </div> . <div> nào sẽ bao các thẻ <a class="quan">Quan</a> , <a class="ao">Ao</a> như sau:

    <div class="items">
    <a class="ao" href="#">Áo</a>​
    <a class="quan" href="#">Quần</a>​
    </div>
    Sau đó xét css cho nó:

    .items{
    background: url(../images/abc.png);//////cái này là background hình người mặc quần áo như bạn nói.
    float:left;
    position:relative;
    width:200px;// lấy ví dụ thôi nhá
    height:200px;//
    }
    .items a{
    text-indent:-9999px;
    float:left;// bỏ cũng được
    }
    .ao{
    background:url(../images/ao.png);/// background hình áo như bạn nói
    position:absolute;
    top: 30px;// cái này bạn tự điều chỉnh sao cho cái áo nó đè lên đúng vị trí
    left: 30px;// tương tự như chỉnh top
    z-index: 9999;
    display:none; // cái này ẩn áo đi để khi hover vô thì mới hiện lên
    }
    .quan{
    .....
    ...
    ... //// với class quần thì tương tự như áo
    }

    bây giờ khi hover sẽ hiện quần hay áo ra

    .ao:hover{
    display: block;
    }
    .quan:hover{
    display:block;
    }

    // còn bạn muốn hiện lên cho mượt hơn thì tìm hiểu animation CSS3 nhá.
    iTD thích bài viết này

Ủng hộ diễn đàn