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.

1 komentar:

  1. saudara-saudara

    Saya di sini untuk bersaksi tentang kebaikan Allah dalam hidup saya dan bagaimana saya diselamatkan dari tekanan finansial karena bisnis saya sedang menurun dan keluarga saya dalam keadaan sulit sehingga kami bahkan tidak dapat membayar uang sekolah untuk anak-anak, karena kepahitan mengambil alih hatiku

    Suami saya juga menggagalkan karena kami menjalankan bisnis keluarga di (Surabaya, Jawa Timur) dimana kami jadi bingung suami saya mencoba untuk mendapatkana pinjaman dari bank dia menolak pinjaman jadi dia online mencari pinjaman karena dia ditipu oleh sone imposters online yang menjanjikan kepadanya pinjaman dan mengatakan harus membayar biaya untuk mendapatkan pinjaman sehingga husbank saya meminjam uang dari teman-temannya untuk membayar biaya maka mereka meminta biaya lagi dengan beberapa alasan dia harus pergi dan meminjam dari saudaranya di (Bekasi) untuk memastikan dia mendapatkan pinjaman setidaknya untuk membiayaiu kebutuhan keluarga dan setelah dia membuat biaya, dia diminta untuk membayar lagi dengan alasan tertentu, hal ini membuat keluarga kelaparan meningkat sehingga kami harus mengumpulkan makanan dari tetangga dekat kami. dan selama berbulan-bulan kami menderita dan bisnis ditutup untuk sementara waktu
    Jadi satu sore yang setia sekitar pukul 14:00 tetangga dekat ini menelepon saya dan mengatakan bahwa dia akan mendapatkan pinjaman dari perusahaan pinjaman secara online sehingga jika dia mendapatkan pinjaman, dia akan mengenalkan saya ke perusahaan tersebut sehingga kami pergi ke ATM bersama-sama dan Memeriksa pinjaman itu tidak ada sehingga kami menunggu sekitar 30 menit kemudian kami mendapat peringatan di teleponnya dari banknya bahwa dia telah menerima monney di akunnya sehingga kami memeriksa saldo rekeningnya dan lihatlah 300 juta kepadanya sebagai pinjaman

    Segera saya berteriak di depan umum sambil menangis dan pada saat itu yang bisa saya pikirkan adalah jika saya dengan jumlah seperti itu, masalah saya berakhir, jadi kami pulang ke rumah saya tidak memberi tahu suami saya, dari 1 juta dia memberi saya saya membeli beberapa bahan makanan di rumah dan berlangganan dan tetangga saya dan saya meminta pinjaman kepada perusahaan karena dia memberi saya pedoman sehingga kami mengikuti prosesnya karena prosesnya sama sehingga setelah semua prosesnya, rekan-rekan saya diberi pinjaman oleh saya
    ONE BILLION RISING FUND (onebillionrisingfund@gmail.com)
    BBM: D8E814FC

    Anda juga bisa mendaftar sekarang dan menyelesaikan masalah keuangan Anda
    Saya berbagi cerita ini karena saya tahu bahwa begitu banyak orang di luar sana memerlukan bantuan keuangan dan perusahaan akan membantu Anda
    Gmail saya adalah

    Ratu Efendi Lisa
    efendiqueenlisa@gmail.com

    BalasHapus

 
GR | Edited by | gubhug reyot