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

Đâ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ênTest Html Editor
Link to this page:

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

About Testtem

0 nhận xét:

Đăng nhận xét

Submit

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

About Testtem

RELATED POSTS

0 nhận xét:

Đăng nhận xét