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...
- 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
- 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ẻ !
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...
 |
| Zoom hình ảnh |
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/AVvXsEiLsJdqIB-Setb8x0PQ8eL0fIZ5tOXLc0ENdrqvxkRosk-vRzUr9j58UWIjVCYjdGPhVDQ9CCvEBQwK7VwFTabzSe6xIhwqUMm8GZlRpc5EZT-cZJvWSIVbBFrkbhenS2QDk4PGUiql4PI/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ẻ !
0 nhận xét:
Post a Comment