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ẻ !
Chuyên mục: javascript, Source code, Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger
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/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ẻ !
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óaHi 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.
XóaỞ trang Demo thì mình thêm 1 Widget(tiện ích) HTML rùi dán code vào.
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Ở 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óagiờ 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
Trả lờiXóa+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 !!!
Bạn muốn có đường link hình ảnh luôn ah, mình chưa hiểu ý của bạn.
Trả lờiXóaCò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ữ...
Bạn ơi up lại link MF down source được ko bạn cám ơn bạn nhiều
Trả lờiXóaHẹn bạn tối nay nhé. hihi, hnay mình đi làm ko đem máy :)
XóaHi. mình đã cập nhật lại link bài viết nhé.
Xóa