Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Mempoles dan Memperindah Title pada Link

 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Halaman Awal</title>
<style type="text/css">
body{
background:#FAFAFA;
}
#menu{
margin:auto;
width:930px;
text-align:center;
}
#menu a{
width:290px;
height:160px;
border:#D5D5D5 1px solid;
display:inline-block;
float:left;
margin:5px;
background:#FFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
background:#EAEAEA;
}
#menu img{
width:280px;
height:120px;
padding:5px;
background:#FFF;
}
#menu a:hover{
box-shadow:0px 0px 7px #D5D5D5;
border:#ABABAB 1px solid;
background:#ABABAB;
color:#FFF;
}
.ket{
display:block;
font-size:12px;
text-align:left;
padding-left:5px;
padding:5px;
}
#tooltip{
width:200px;
z-index: 10000000;
position:absolute;
background:#444;
border-radius: 5px;-o-transition:0.5s ease-out;
color:#000;
border:1px dashed #ff0000;
display:none;
}
</style>
&lt;script type='text/javascript'&gt;
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$("a[title]").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id="tooltip">"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a[title]").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
&lt;/script&gt;
 
 
 
<div id="menu">
<a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
<a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
<a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
<a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
<a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
<a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
<a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
<a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
<a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
</div>


Ada yang mau coba ? saya coba ka belum jadi, saya ingin membuat toolti sederhana melalui title pada ink.
mohon bantuan ya...

Comments

  • Hm kurasa sih lu udah kecapean nih :

    Sebelum:
    $("body").append("<p id="tooltip">"+ this.t +"</p>");

    Seharusnya:

    $("body").append("<p id='tooltip'>"+ this.t +"</p>");

    Hati2 dalam quote string
  • Btw saran saya sih coba pakai firefox lalu install extension web developer dan firebug. Kedua extension itu memudahkan debugging.
  • ohiya iya.. makasih ya mas @yonscun_lie

    makasih berat eh. haha... tak coba dulu
  • eh mas.. udah tak perbaiki. eh tetep ga jadi we...
  • edited July 2012
    Aduh kok ada pembatasan ukuran segala tolong digabung sendiri ya, asumsi jquery.js ada di satu folder

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Halaman Awal</title>
    <script src="jquery.js"></script>

    <style type="text/css">
    body{
    background:#FAFAFA;
    }
    #menu{
    margin:auto;
    width:930px;
    text-align:center;
    }
    #menu a{
    width:290px;
    height:160px;
    border:#D5D5D5 1px solid;
    display:inline-block;
    float:left;
    margin:5px;
    background:#FFF;
    text-decoration:none;
    font-family:Arial, Helvetica, sans-serif;
    background:#EAEAEA;
    }
    #menu img{
    width:280px;
    height:120px;
    padding:5px;
    background:#FFF;
    }
    #menu a:hover{
    box-shadow:0px 0px 7px #D5D5D5;
    border:#ABABAB 1px solid;
    background:#ABABAB;
    color:#FFF;
    }
    .ket{
    display:block;
    font-size:12px;
    text-align:left;
    padding-left:5px;
    padding:5px;
    }
    #tooltip{
    width:200px;
    z-index: 10000000;
    position:absolute;
    background:#444;
    border-radius: 5px;-o-transition:0.5s ease-out; 
    color:#000;
    border:1px dashed #ff0000;
    display:none;
    }
    </style>
  •     <script type='text/javascript'>
        this.tooltip = function(){
        xOffset = 10;
        yOffset = 20;
        $("a[title]").hover(function(e){
        this.t = this.title;
        this.title = "";
        $("body").append("<p id='tooltip'>"+ this.t +"</p>");
        $("#tooltip")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");
        },
        function(){
        this.title = this.t;
        $("#tooltip").remove();
        });
        $("a[title]").mousemove(function(e){
        $("#tooltip")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
        });
        };
        // starting the script on page load
        $(document).ready(function(){
        tooltip();
        });
        </script>

    </head>
     <body>
     
    <div id="menu">
    <a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
    <a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
    <a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
    <a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
    <a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
    <a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
    <a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
    <a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
    <a href="#" title="Keterangan mengenai Halaman Yang Dituju Link ini"><img src="1.jpg"><span class="ket">Link Ke Satu</span></a>
    </div>
    </body>
    </html>
  • ok.. tak coba dulu mas @yonscun_lie,, baik deh. haha,,
  • mas mang harus pake jquery ?
    berarti  kalo ga pake jquery ga jalan ya...
  • sipppp.... jadi mas... ok ok. makasih banyak deh.. berarti script dari saya yg salah yg mana ya ?
  • haa..ternyata cuma gara2 script Jquerynya tidak dipanggil haha...


    makasih bgt mas... sipplah.
  • hmm mantap tuh, @saefulloh gmn gan dah lancar ya? bagi2 dong, ane masih bingung nih, ditulis dimari ato d blog dong seperti apa lengkapnya, matursuwun gan :)
  • itu yang dari mas @yonscun_lie.. tinggal copas jadi.. ntar tinggal dipoles sendiri cssnya. :-)
  • owh maaf soalnya masih blm bgtu ngerti, sekarng jadi ngerti dikit2, makasih gan :)
  • hehe... ok.
    mas ga masalah si, cuma ada beerapa yg ga suka kata 'gan' disini, soale kalo 'gan' tu di kaskus. hehe
  • edited July 2012
    wah boleh jg nh di coba scriptnya,tanks infonya gan

  • sama sama.. aku juga baru belajar.
  • mau comment uda di benerin mas yocsun
Sign In or Register to comment.