Thứ Ba, 27 tháng 1, 2015

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:
<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" />

Code :

<style>

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

<Body>
<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" />
Demo:


SHARE THIS
Báo Đài Loan

Author:

Facebook Comment