Tooltip Thủ thuật khi rê chuột vào ảnh ( thumbnail ) hiện ảnh lớn hơn

Posted by Testtem Posted on 10:52 with No comments

Đây là thủ thuật sử dụng javascript ( Image Trail Tooltip ) khi rê chuột vào ảnh thumbnail sẽ hiện ảnh lớn hơn. Các bạn có thể tùy chỉnh thông số trong đoạn code màu đỏ (width, height) trong thẻ <body> .
Màu xanh : là link ảnh của bạn ( chú ý: mỗi ảnh có 2 link ).
Code của ảnh thứ nhất:

HTML

<img alt="Thumbnail" height="75" onmouseout="hideTrail();" onmouseover="showTrail(310,230, 'https://lh6.googleusercontent.com/-4JUtPRCDtoM/VEa1pd3ZUJI/AAAAAAABkbI/ANIpxQ4M6wA/w720-h480-no/10007518_712204588824702_132144577_n.jpg');" src="https://lh6.googleusercontent.com/-4JUtPRCDtoM/VEa1pd3ZUJI/AAAAAAABkbI/ANIpxQ4M6wA/w720-h480-no/10007518_712204588824702_132144577_n.jpg" width="110" />

Xem code và demo bên dưới:

TTP © 2014

  <style>

/* Image Trail Tooltip CSS */

 .trail-image {

              width:0;

              height:0;

              background-color:#ddd;

              border:1px solid #888;

              position:absolute;

              top:-9999px;

              left:-9999px;

              z-index:9999;

              visibility:hidden;

              -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, .2);

              -moz-box-shadow:0 1px 1px rgba(0, 0, 0, .2);

              box-shadow:0 1px 1px rgba(0, 0, 0, .2);

}

   </style>

 <script type ="text/javascript" src ="http://yourjavascript.com/0541171811/img-tooltip.js">

 </script> 
  
          <h3 style="color: #555555;">     Tooltip: Thủ thuật khi rê chuột vào ảnh hiện ảnh lớn hơn</h3>

        Hover me!!

          <img alt="Thumbnail" height="75" onmouseout="hideTrail();" onmouseover="showTrail

(310,230,'https://lh6.googleusercontent.com/-4JUtPRCDtoM/VEa1pd3ZUJI/AAAAAAABkbI/ANIpxQ4M6wA/w720-h480-no/10007518_712204588824702_132144577_n.jpg');"
 src="https://lh6.googleusercontent.com/-4JUtPRCDtoM/VEa1pd3ZUJI/AAAAAAABkbI/ANIpxQ4M6wA/w720-h480-no/10007518_712204588824702_132144577_n.jpg" width="110" />

          <img alt="Thumbnail" height="75" onmouseout="hideTrail();" onmouseover="showTrail(310,230,'https://lh4.googleusercontent.com/-fNYNRhzRvA8/VEaAC0Mlj9I/AAAAAAAA-SA/bxTkEidIH_g/w1050-h699-no/3.JPG');" src="https://lh4.googleusercontent.com/-fNYNRhzRvA8/VEaAC0Mlj9I/AAAAAAAA-SA/bxTkEidIH_g/w1050-h699-no/3.JPG" width="110" />

        <img alt="Thumbnail" height="75" onmouseout="hideTrail();" onmouseover="showTrail(310,230,'https://lh4.googleusercontent.com/-0TtZZ5M1dyU/VEaTCAgtyvI/AAAAAAAA-U0/mxXso4OKNys/w1118-h646-no/1.JPG');" src="https://lh4.googleusercontent.com/-0TtZZ5M1dyU/VEaTCAgtyvI/AAAAAAAA-U0/mxXso4OKNys/w1118-h646-no/1.JPG" width="110" />

Bạn có thể test thử trên Test Html Editor
Link to this page:

0 nhận xét:

Đăng nhận xét

Thanks for following my blog

Bạn có thể chèn trực tiếp một số thẻ HTML đưa vào comment như:
Chữ in đậm : Nội_dung_chữ_in_đậm 
Chữ in nghiêng : Nội_dung_chữ_in_nghiêng 
Chèn code : Nội_dung_code_đã_mã_hóa 
Chèn link liên kết : <a href = ' Link '> Tên_link </a>
Dùng link ảnh chèn trực tiếp vào comment
Don't spam link here. Pls

Mã Hóa

Tooltip Thủ thuật khi rê chuột vào ảnh ( thumbnail ) hiện ảnh lớn hơn

0 nhận xét:

Đăng nhận xét

Label

Popular Post

Live Traffic Feed

YOUR POSITION

Popular

Label