=xXx+=(EXPLORATION)==+==xXx

Home » Tips Blogger » Easiest Tooltip And Image Preview Using jQuery

Easiest Tooltip And Image Preview Using jQuery

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/* ---------------
Easiest Tooltip and Image Preview with jQuery
---------------------------------- */
#Imagetip{
   margin:0;
   padding:0;
}
#Imagetip li{
   list-style:none;
   float:left;
   display:inline;
   margin-right:10px;
}

/* */

#preview{
   position:absolute;
   border:1px solid #ccc;
   background:#333;
   padding:5px;
   display:none;
   color:#fff;
   }

Selanjutnya simpan kode berikut diatas kode </head> :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://kangdadang.googlecode.com/files/main2.js" type="text/javascript"></script>

Terakhir cara pemasangan di HTML :

<ul id="Imagetip">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-UVRGWb4iClvUcSemc26QtUSSX0STLHmVFcUpus4yNISsUALrwNH54QiPSDZn9yuooWXdffvcp-YFM-KzsWiRmwU6zRPYKB7V1PLX0SB51cobm33PMV2OkAHFpYqcbjwoTC1h5SxDimY/s1600/1.jpg " class="preview" title="Lake and a mountain">
<img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-UVRGWb4iClvUcSemc26QtUSSX0STLHmVFcUpus4yNISsUALrwNH54QiPSDZn9yuooWXdffvcp-YFM-KzsWiRmwU6zRPYKB7V1PLX0SB51cobm33PMV2OkAHFpYqcbjwoTC1h5SxDimY/s1600/1.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGP2p3vsOdIpIPAc1ufhWaz8qSHypTUmuTRQ0Xr1OBYbLkkaiP5mb__S5OFQamkhbqPGY2IQazU5oshyphenhyphenFC2pY2L7xI_8TNq6lGU4cm0ByCMB_9tWAY3dU6jM0VOXYS_Coth-Mqpuj5pW0/s1600/2.jpg" class="preview" title="Fly fishing"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGP2p3vsOdIpIPAc1ufhWaz8qSHypTUmuTRQ0Xr1OBYbLkkaiP5mb__S5OFQamkhbqPGY2IQazU5oshyphenhyphenFC2pY2L7xI_8TNq6lGU4cm0ByCMB_9tWAY3dU6jM0VOXYS_Coth-Mqpuj5pW0/s1600/2.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0FWQ6VBW8plL_Gs9J-hgt9Qp-6I6zhHRuJU2WPs0RJFRKwAkAkwdT4m8DqVO8Lp8uicYPwXigy-2jlO4afo7Fs1mxi2bpET-thBc70uzJcBDS_DrkPz5EP5H2XKDbm3rFHSYmpPCoMA/s1600/3.jpg" class="preview" title="Autumn"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi0FWQ6VBW8plL_Gs9J-hgt9Qp-6I6zhHRuJU2WPs0RJFRKwAkAkwdT4m8DqVO8Lp8uicYPwXigy-2jlO4afo7Fs1mxi2bpET-thBc70uzJcBDS_DrkPz5EP5H2XKDbm3rFHSYmpPCoMA/s1600/3.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNp7uKPJivYnAgYbKNeVuhEtj7-Dtlu1Da5IfLyY4i-uBKyAiQ0XPDCNJPT_W_THPQqFV1Zm-GGuWPkFsCeWf_6-M9Rkvp6Rp_idLaHFUywBRWQU8mZ8AU7kZ3b30b1aOKGbwDYAEGLAM/s1600/4.jpg" class="preview" title="Skiing on a mountain"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNp7uKPJivYnAgYbKNeVuhEtj7-Dtlu1Da5IfLyY4i-uBKyAiQ0XPDCNJPT_W_THPQqFV1Zm-GGuWPkFsCeWf_6-M9Rkvp6Rp_idLaHFUywBRWQU8mZ8AU7kZ3b30b1aOKGbwDYAEGLAM/s1600/4.jpg" alt="gallery thumbnail" /></a>
</li>
</ul>