Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat dan Memasang Javascript Tooltip-2 : Display image in tooltip !

Javascript Tooltip-1 berbeda dengan CSS tooltip sebelumnya yang memfungsikan hover untuk menghasilkan tooltip. Dengan javascript ini, tooltip dimunculkan melalui "title" pada link yang kita gunakan. Tentu saja CSS masih juga diperlukan untuk pengaturan beberapa fungsi, seperti posisi (padding dan margin), warna, background, serta jenis, tebal dan ukuran teks/font.

Kode CSS :
.tip{
        font:12px Arial; 
        border:solid 2px #999; 
        width:220px; 
        padding:8px;
        position:absolute; 
        z-index:100;
        visibility:hidden; 
        color: #FFFFCC; 
        background:#000 url(https://lh3.googleusercontent.com/-3M5IcdYHokI/T3E0p4POHwI/AAAAAAAAAjA/E-qituUeEKM/h400/grad-blacktoblue-1x400.png) bottom repeat-x;
        border-radius:15px;
} 
.tip b{
        font-size:12px;
        font-family:Verdana;
        font-weight:bold;
        color:#ccc;
        border-bottom:1px dotted #999;
} 
.tip img.small{
        width:60px;
        height:auto;
        border:1px solid #FFFF99;
        padding:2px;
        background:#fff;
        display:block;
        float:left;
        margin:8px 8px 8px 0;
}
.tip img.big{
        width:215px;
        height:auto;
        border:1px solid #FFFF99;
        padding:2px;
        background:#fff;
        display:block;
        float:left;
        margin:8px 8px 8px 0;
}
.tip p{
        margin:8px 0 0 0;
}

Javascript :
<script type="text/javascript">
//<![CDATA[
function pw() {
    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
};
function mouseX(evt) {
    return evt.clientX ? evt.clientX + (
    document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;
}
function mouseY(evt) {
    return evt.clientY ? evt.clientY + (
    document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY
}
function popUp(evt, oi) {
    if (document.getElementById) {
        var wp = pw();
        dm = document.getElementById(oi);
        ds = dm.style;
        st = ds.visibility;
        if (dm.offsetWidth) ew = dm.offsetWidth;
        else if (dm.clip.width) ew = dm.clip.width;
        if (st == "visible" || st == "show") {
            ds.visibility = "hidden";
        }
        else {
            tv = mouseY(evt) + 20;
            lv = mouseX(evt) - (ew / 4);
            if (lv < 2) lv = 2;
            else if (lv + ew > wp) lv -= ew / 2;
            lv += 'px';
            tv += 'px';
            ds.left = lv;
            ds.top = tv;
            ds.visibility = "visible";
        }
    }
}
//]]>
</script>
xHTML-1 :
<div id="tips1" class="tip"><b>Title</b><img class="small" src="https://lh6.googleusercontent.com/-DkmvIFciapU/T14I_KL_M2I/AAAAAAAAAWo/xuwBkTtzsGQ/s128/gubhugreyot_cwk-01.jpg"/><p>Tuliskan teks tooltips di sini !</p></div><a href="URL" onmouseout="popUp(event,'tips1')" onmouseover="popUp(event,'tips1')" target="_blank">Link title-1</a>
xHTML-2 :
<div id="tips2" class="tip"><b>Title</b><img class="big" src="https://lh3.googleusercontent.com/-SlUER4FroYw/T14nvhK2r6I/AAAAAAAAAXQ/tcjQB1jAdQk/s128/gubhugreyot_jaran-goyang.jpg"/><p>Tuliskan teks tooltip di sini !</p></div><a href="URL" onmouseout="popUp(event,'tips2')" onmouseover="popUp(event,'tips2')" target="_blank">Link-title-2</a>
xHTML-3 :
<div id="tips3" class="tip">
<table align="center" width="210" border="0" cellspacing="0" cellpadding="5" bgcolor="#008cff">
<tr>
<td valign="bottom" align="center"> 
<img src="https://lh5.googleusercontent.com/-GkzCLx_FMIE/T14JCKL2c2I/AAAAAAAAAXA/hmebmZZKYOY/s128/gubhugreyot_cwk-05.jpg" width="210" height="120" border="0" alt="" /></td></tr><tr><td valign="bottom" align="center">Link Title-3
</td>
</tr>
</table>
</div>
xHTML-4 :
<a href="URL" onmouseout="popUp(event,'tips3')" onmouseover="popUp(event,'tips3')" target="_blank">Link Title-4</a>
xHTML-5 :
<div id="tips4" class="tip" style="background:#000; width:240px;"><b>Judul Tooltip !</b><p>Tuliskan teks tooltip di sini !</p></div><a href="URL" onmouseout="popUp(event,'tips4')" onmouseover="popUp(event,'tips4')" target="_blank">Link Title-5</a>
xHTML-6 :
<div id="tips5" class="tip" style="background:#555;"><b>Judul Tooltip !</b><p>Tuliskan teks tooltip di sini !</p></div><a href="URL" onmouseout="popUp(event,'tips5')" onmouseover="popUp(event,'tips5')" target="_blank">Link Title-6</a>

  1. Simpan kode CSS dan javascript di antara tag <head> dan tag </head>
  2. Beberapa xHTML di atas berfungsi untuk membuat berbagai tooltip.

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot