Code tooltip rê chuột phóng to hình ảnh cho Web - blog - blogspot

Code rê chuột phóng to hình ảnh cho Web - blog:
Khi truy cập vào một trang Web nào đó (đặc biệt là những trang bán hàng, giới thiệu sản phẩm) các bạn thấy rất nhiều hình ảnh sản phẩm, ở dưới dạng nhỏ thôi. Mình muốn chọn sản phẩm nào đó thì Click vào, hoặc rê chuột vào là hình ảnh phóng to, xem được hình lớn hơn.
- Bài viết này mình giới thiệu các bạn về code đó, code tooltip rê chuột phóng to hình ảnh. Cái này tương đối cần thiết cho việc thiết kế Website, blogger, Wordpress...
Code zoom hình ảnh cho Website blog, sử dụng javascript cho zoom images
Zoom hình ảnh
- Xem DEMO TẠI ĐÂY
Phần Demo trên mình chỉ giữ lại hình ảnh, chứ không thêm miêu tả, chi tiết... Bạn nào muốn thêm thì lát coi ở Code mình giới thiệu có chỉnh sửa nhé.
Download code
Một số chỉnh sửa:
Trong file ddimgtooltip.js ngay ở những dòng đầu các bạn chú ý tới đoạn code

tooltips[0]=["http://3.bp.blogspot.com/-MZyOs_2-azI/UG-gUZ6hmNI/AAAAAAAABZ4/NnsEmnzAnY0/s1600/termviewer1.JPG", "Welcome to my blog:
http://nguoinhaque0909.blogspot.com", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
tooltips[1]=["http://3.bp.blogspot.com/-MZyOs_2-azI/UG-gUZ6hmNI/AAAAAAAABZ4/NnsEmnzAnY0/s1600/termviewer1.JPG", " Bai viet gioi thieu TermViewer - blog PIT Mang may tinh", {background:"#DDECFF", width:"200px"}]
tooltips[2]=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBtA55gRxU1VklAitMKcFwBIdypZXPwikLDhacFUo69LJhbxkiD0hspLc8ixBClqBKLqCT8ADRLlPm8yhUSNSdSvlUaxaz10aYCr2bDgrpc1IFfCp2wQK5hbZ4e9Fx34DeHPcB2xY6520/s720/1.jpg"]
tooltips[3]=["http://3.bp.blogspot.com/-MZyOs_2-azI/UG-gUZ6hmNI/AAAAAAAABZ4/NnsEmnzAnY0/s1600/termviewer1.JPG", "Ket noi cong dong Blogger", {background:"white", font:"bold 12px Arial"}]

- Những đoạn bôi đậm là những phần riêng tư, dành để quảng cáo site mình (hehe) nên khi các bạn dùng thì thay đổi nhé, mà giữ nguyên thì càng tốt. ^^
Code rê chuột phóng to hình ảnh bằng CSS các bạn tham khảo tại bài viết
http://www.itviet360.com/2012/12/css-re-chuot-phong-to-hinh-anh-cho-web-blog.html
------------------------------------------------
Các bạn cũng có thể chèn trực tiếp code java và css vào trong 1 file html.
Chúc các bạn vui vẻ !
Chuyên mục: , , , , ,

9 nhận xét:

  1. bạn có thể hướng dẫn mình làm hiệu ứng này cho blogspot dc ko, mình ko bít chèn vào kiểu gì

    Trả lờiXóa
    Trả lời
    1. Hi bạn. Ở phần demo mình cũng làm trên blogspot. Blogger cho chèn như 1 trang html đó bạn. Ví dụ bạn tạo 1 trang mới trên blogger, chọn chế độ viết là HTML rồi copy code trên vào.
      Ở trang Demo thì mình thêm 1 Widget(tiện ích) HTML rùi dán code vào.

      Xóa
  2. Bạn có thể hướng dẫn rõ hơn không? Mình không biết chèn thế nào cả

    Trả lờiXóa
  3. Ở phần Code đã có tất cả rồi bạn. Trên phần Code mình kẻ khung ở trên đó là hình ảnh zoom lớn có trong file ddimgtooltip.js , zoom nhỏ có trong file HTML.

    Trả lờiXóa
  4. giờ mình làm sãng giờ rùi mà chưa được bạn giúp mình nhanh nhé :D cần gấp lắm
    +giờ mình muốn truyền 1 đường link hình ảnh từ HTML vào mình ko muốn để nó là rel="imgtip[3]" mà chuyền nó thành rel="imgtip[3]"+Đường_Link_hình_ảnh.
    rùi còn bên js nó nhận và sử lý dữ liệu thế nào mong bạn giúp cho :| bỏ luôn cái số 3 kia cũng dc mình chỉ muốn nó chuyền Đường_link_hình_ảnh thôi là ok rùi ! sửa hoài ko dc ! demo này hay lắm ! thank you very much !!!

    Trả lờiXóa
  5. Bạn muốn có đường link hình ảnh luôn ah, mình chưa hiểu ý của bạn.
    Còn Code tooltip này hoạt động của nó là trên javascrip để hình ảnh (imgtip) nào thì dưới HTML để tương ứng.
    Bạn tải Code về, trong đó có 3 dạng Show ảnh, có cả show ảnh + chữ...

    Trả lờiXóa
  6. Bạn ơi up lại link MF down source được ko bạn cám ơn bạn nhiều

    Trả lờiXóa
    Trả lời
    1. Hẹn bạn tối nay nhé. hihi, hnay mình đi làm ko đem máy :)

      Xóa
    2. Hi. mình đã cập nhật lại link bài viết nhé.

      Xóa