Home » » Easiest Tooltip And Image Preview Using jQuery

Easiest Tooltip And Image Preview Using jQuery

    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. 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://lh6.googleusercontent.com/-03QKsJUkcV8/TY2ly3UVyhI/AAAAAAAAAew/fW3PWnO7aZM/s1600/1.jpg " class="preview" title="Lake and a mountain">
<img width="100px" height="75px" src="https://lh6.googleusercontent.com/-03QKsJUkcV8/TY2ly3UVyhI/AAAAAAAAAew/fW3PWnO7aZM/s1600/1.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://lh5.googleusercontent.com/--YBF3BHoimI/TY2l2z90BNI/AAAAAAAAAe4/TT_n1DYdaUs/s1600/2.jpg" class="preview" title="Fly fishing"><img width="100px" height="75px" src="https://lh5.googleusercontent.com/--YBF3BHoimI/TY2l2z90BNI/AAAAAAAAAe4/TT_n1DYdaUs/s1600/2.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://lh3.googleusercontent.com/-TemuZjaX5YI/TY2l78o61xI/AAAAAAAAAfA/hrs2T9Px7Q8/s1600/3.jpg" class="preview" title="Autumn"><img width="100px" height="75px" src="https://lh3.googleusercontent.com/-TemuZjaX5YI/TY2l78o61xI/AAAAAAAAAfA/hrs2T9Px7Q8/s1600/3.jpg" alt="gallery thumbnail" /></a>
</li>
<li><a href="https://lh3.googleusercontent.com/-M1XDI2YFVTw/TY2mCmsHraI/AAAAAAAAAfI/dsEPh29oUBE/s1600/4.jpg" class="preview" title="Skiing on a mountain"><img  width="100px" height="75px" src="https://lh3.googleusercontent.com/-M1XDI2YFVTw/TY2mCmsHraI/AAAAAAAAAfI/dsEPh29oUBE/s1600/4.jpg" alt="gallery thumbnail" /></a>
</li>
    </ul>

  • Save
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .