Menu Icon Zoomer
Coba anda arahkan kursor muose anda pada menu icon diatas, maka gambar menu icon akan berubah bentuk menjadi besar.
Atau klik disini untuk melihat contohnya langsung..
Oke langsung saja copy paste script kodenya dibawah ini
Script kode
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}
.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}
.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
/*by www.kikiyo.co.cc*/
#orbs li{
width: 65px;
height:60px;
}
#orbs li img{
width: 55px;
height: 60px;
}
#squares li{
width: 45px;
height:40px;
}
#squares li img{
width: 31px;
height: 31px;
}
</style>
<script type="text/javascript" src="http://wwwkikiyococc.googlecode.com/files/imgbubbles-by-www.kikiyo.co.cc.js">
/***********************************************
* Script code by www.kikiyo.co.cc dont change this
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //by www.kikiyo.co.cc
$('ul#squares').imgbubbles({factor:2.5}) //by www.kikiyo.co.cc
})
</script>
<ul id="orbs" class="bubblewrap">
<li><a href="http://www.facebook.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFZtK0Fzt1p81qiYLuEaeKTcIz18t9WZaxTt5FsMi5fSMFZPvIG2XQZ63WKmiXfrZXjNYuJb6LnJ54EKO90ECPlMlWiHN9q3GOersx7C43qRdvtds2ccczKzuRsoh5VIbSqbcCvuGyDaBJ/s128/facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="http://www.digg.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq6umlBgyroljyf5RpKU5B4c9cFGgmcqEursm15wObJSwKimNBFvSqSMTpnM6nj8FqYBAW2i6ObOzOsyQeYU8aDhQZqViwKhtmvgtjBg7Y7h7OecNQN5G36v2ydjxiql6WS35nW3Lgiwo6/s128/digg.png" alt="Add to Digg" /></a></li>
<li><a href="http://www.twitter.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-hEXnBpgehZrYeovS85kATiJSvmW2X-meob7bLakmkRim-CuIRy_Olqo8Rzq2xg7J5xAtvPvdBd5IlNl2lFfoxvKcL6PpVxRJ_9VKMfTVdokZFePzCdr01bqa38g8o_OYoLrbltc7HZ-V/s128/twitter.png" alt="Add to Twitter" /></a></li>
<li><a href="http://www.rss.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghl-nUHWOVDa9m1GTQYDqAvnZN80lWPrBWZ56yaZI_OsB8K5_JzLQiNyd6Ux_n31ogy8BfCoGefvY2K-D36dN66HZWQ9WY6S9L_Ia3lKou25YIFm-Oc_-MybdGL6iQgfLAKBr-yYSlkgxT/s128/rss.png" alt="Add RSS Feed" /></a></li>
</ul>
Tidak ada komentar:
Posting Komentar