- Cara membuatnya :
- 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;
}
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 pemanggilannya pda HTML :
<ul id="Imagetip">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjJgHuv3Cde89Sgtl4heXvY8A-OGHIWCg8wJaYd1gBzc6f5_tf9JZidWW25Ypon0rsMN7VTMJchsLGjEdatI_Cy7WHXyhfmvRDVrl7EJC_b8V691b_l_vbML9nhxqUXfj_QqjxRrwL4Vw/s1600/1.jpg " class="preview" title="Lake and a mountain">
<img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjJgHuv3Cde89Sgtl4heXvY8A-OGHIWCg8wJaYd1gBzc6f5_tf9JZidWW25Ypon0rsMN7VTMJchsLGjEdatI_Cy7WHXyhfmvRDVrl7EJC_b8V691b_l_vbML9nhxqUXfj_QqjxRrwL4Vw/s1600/1.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW6btzNgQmJmRJhC37XdpElq124qJf_jx_6Gg412xXWwjiAoYRS7bqJax_Bg7lwCIKsixxXEBZJ8Wj1lS9ychfUJe1AFCIAQAfuWLikPxLC9xRZfTCSqkwQPSn5IbM0_jD54GxIc1NvRo/s1600/2.jpg" class="preview" title="Fly fishing"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW6btzNgQmJmRJhC37XdpElq124qJf_jx_6Gg412xXWwjiAoYRS7bqJax_Bg7lwCIKsixxXEBZJ8Wj1lS9ychfUJe1AFCIAQAfuWLikPxLC9xRZfTCSqkwQPSn5IbM0_jD54GxIc1NvRo/s1600/2.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikM9RNsVvQd2LtCMLafX8de70kLw-uiGkgEku0hBouNx5krDTdjfTCL5R8nqYsB5JnvBPciTVM8oUXlZ4O5DjjpVCi8aipJFezog-Dc9OTrHVgplA2o4EzPAbMZauLQBAG7v6QCrmjQw/s1600/3.jpg" class="preview" title="Autumn"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikM9RNsVvQd2LtCMLafX8de70kLw-uiGkgEku0hBouNx5krDTdjfTCL5R8nqYsB5JnvBPciTVM8oUXlZ4O5DjjpVCi8aipJFezog-Dc9OTrHVgplA2o4EzPAbMZauLQBAG7v6QCrmjQw/s1600/3.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV2QIMaEph94qgxMKzrEHfyJABklFjLJpjA81wcdHr2b6oqcFd9FoDvVOSqF7qEDOHnkdsTHjdYyn62jIGEDXDHlzYpZot0oa_AYV5fKjnQ_KbihXJ8zfONtzJuuBqOnh9XCgFnBo1XU8/s1600/4.jpg" class="preview" title="Skiing on a mountain"><img width="100px" height="75px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV2QIMaEph94qgxMKzrEHfyJABklFjLJpjA81wcdHr2b6oqcFd9FoDvVOSqF7qEDOHnkdsTHjdYyn62jIGEDXDHlzYpZot0oa_AYV5fKjnQ_KbihXJ8zfONtzJuuBqOnh9XCgFnBo1XU8/s1600/4.jpg" alt="gallery thumbnail" /></a>
</li>
</ul>
selamat mencoba dan mengembangkannya..... sukses...
Responses
0 Respones to "Termudah Tooltip dan Gambar Menggunakan jQuery"
Post a Comment
Terima kasih telah membaca dan berkomentar Termudah Tooltip dan Gambar Menggunakan jQuery, .