Hỗ trợ trực tuyến

  • (Bùi Trọng Bằng)

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • Thành viên trực tuyến

    0 khách và 0 thành viên

    DANH NGÔN MỖI NGÀY

    Gốc > Tìm hiểu code CSS-Java >

    Thủ thuật nhỏ cho các liên kết bằng hình ảnh

    Phóng to || Thu nhỏ
    Hover Effects For Image Link
    - Bài viết này mình sẽ hướng dẫn tạo một hiệu ứng nho nhỏ cho các liên kết bằng hình ảnh. Đó là hiệu ứng phóng to ảnh khi rê chuột tới liên kết bằng hình ảnh đó. Và với thủ thuật nhỏ này, ta sẽ tạo ra các liên kết bằng hình ảnh trông bắt mắt hơn. Phổ biến nhất là tạo các menu dạng hình ảnh.

    Ở đây mình sẽ đưa ví dụ về menu liên kết dạng ảnh.
    Đầu tiên bạn phải có các hình ảnh để tạo liên kết. Để trông đẹp mắt thì mình khuyên các bạn dùng các ảnh nhỏ, chừng 50px là được, và cái nữa là các hình phải là hình vuông. Ví dụ 50x50 px.

    Các bạn tham khảo đọan code CSS sau:
    #newnavbar ul li{
    list-style-type: none;
    display:inline;
    margin:0px;
    padding:30px;
    border:0px solid;
    }

    #newnavbar li a img{
    height:30px;
    width:30px;
    }

    #newnavbar li a:hover img{
    height:40px;
    width:40px;
    background: #ffff66;
    }

    #newnavbar li a:visited img{
    height:30px;
    width:30px;
    background: #6D7B8D;
    }
     
     




    ►Đọc hiểu code:

    - Với đọan code này:


    #newnavbar li a img{
    height:30px;
    width:30px;
    }



    -> liên kết ảnh khi chưa có tác động vào sẽ có kích thước ảnh là 30x30px, và không có màu nền. (xem hình bên dưới)

    - Khi có tác động rê chuột vào, ảnh sẽ được phóng to lên thành 40x40px, và có màu nền là màu vàng. (xem đọan CSS bên dưới)
     
    #newnavbar li a:hover img{
    height:40px;
    width:40px;
    background: #ffff66;
    }
     


    - Tiếp tục với đọan CSS cuối cùng, đọan code này sẽ hiển thị những liên kết đã được truy cập, và hình ảnh thu nhỏ lại về 30x30px, và màu nền sẽ là màu xám.(xem đọan CSS bên dưới)
    #newnavbar li a:visited img{
    height:30px;
    width:30px;
    background: #6D7B8D;
    }
     



    - Theo mình nghĩ, nếu muốn tạo menu kiểu liên kết ảnh như thế này thì bạn không nên dùng hình nền và tạo hiệu ứng khác khi các liên kết đã được truy cập. Như vậy thủ thuật còn lại chỉ là phóng to ảnh khi đưa chuột tới liên kết mà thôi. Như vậy ta sẽ bỏ hẳn dòng background: {mã màu}; trong mỗi ID và bỏ hẳn ID #newnavbar li a:visited img trong đọan code CSS trên.

    ►Bonus: nhân tiện mình hướng dẫn luôn cách tạo 1 menu dạng liên kết ảnh đơn giản.
     
    2.Codehtml

    <div id='newnavbar'>
    <ul>
    <li><a href="URL of Home page"><img src="URL of Home image"></a></li>
    <li><a href="URL of Music page"><img src="URL of Music image"></a></li>
    <li><a href="URL of Books page"><img src="URL of Books image"></a></li>
    <li><a href="URL of Links page"><img src="URL of Links image"></a></li>
    <li><a href="URL of Profile page"><img src="URL of Profile image"></a></li>
    <li><a href="mailto:YOUR EMAIL ADDRESS"><img src="URL of Email image"></a></li>
    </ul></div>

    Thay đổi link liên kếtlink của hình ảnh thành các liên kết và hình ảnh của bạn.


    Như vậy đã xong.
    Chúc các bạn thành công.

     

    Bookmark and Share


    Nhắn tin cho tác giả
    Cao Bằng @ 11:14 30/09/2009
    Số lượt xem: 992
    Số lượt thích: 0 người
    Avatar

    Thủ thuật nhỏ cho các liên kết bằng hình ảnh

     
    Gửi ý kiến