How to Create Fixed Popup Tex Box

Fixed Popup Text Box sebenarnya tak jauh berbeda dengan tooltip, hanya pada fixed popup text box tips yang muncul akan selalu berada di tengah-tengah halaman blog. Untuk membuatnya diperlukan sebuah javascript dan beberapa kode CSS serta sebuah xHTML. Anda harus meletakkan xHTML-nya tepat di atas javascript, sehingga secara otomatis peyimpanan harus dilakukan di antara tag pembuka body dan tag penutupnya. Agar lebih mudah lakukan melalui "Add a Gadget".

Fixed Popup Tex Box diaktifkan melalui "onmouseover" dan "onmouseout". Ketika mouse berada di atas link Popup Text Box akan bekerja untuk menampilkan teks debfab posisi di tengah-tengah halaman blog dan akan segera menghilang ketika mouse dilepaskan.

D E M O : Fixed Popup Text Box

Kode CSS, xHTML dan Javascript :

<style type="text/css">
.popup{
        font-family:Arial; /* edit jenis font */ 
        font-size:18px; /*edit ukuran font */ 
        color:#033;  /* edit warna font */   
        background:#eee;  /*edit warna latar box - background */ 
        width:500px;  /* edit lebar box */  
        text-align:justify;  /* edit text-align */ 
        padding:10px 6px;
        font-weight:500;  /* edit tebal huruf */ 
        border:5px double #888;  /* edit border */ 
        border-radius:6px;
        text-shadow:2px 2px 2px #888;
}
#popuptextbox {
        position:fixed;
        top:25%;  /* edit posisi popup text box - vertical */ 
        left:25%;  /* edit posisi popup text box - horizontal */ 
        visibility:hidden;
        z-index:200;
}
</style>

<div id="popuptextbox"></div>

<script type="text/javascript">
//<![CDATA[
var old, skn, iex = (document.all);
var ns4 = document.layers
var ns6 = document.getElementById && !document.all
var ie4 = document.all
if (ns4) skn = document.popuptextbox
else if (ns6) skn = document.getElementById("popuptextbox").style
else if (ie4) skn = document.all.popuptextbox.style
if (ns4) document.captureEvents(Event.MOUSEMOVE);
else {
 skn.visibility = "visible"
 skn.display = "none"
}
document.onmousemove = get_mouse;
function popup(msg) {
 var content = "<div class=popup>" + msg + "</div>";
 if (ns4) {
  skn.document.write(content);
  skn.document.close();
  skn.visibility = "visible"
 }
 if (ns6) {
  document.getElementById("popuptextbox").innerHTML = content;
  skn.display = ''
 }
 if (ie4) {
  document.all("popuptextbox").innerHTML = content;
  skn.display = ''
 }
}

function remove_popup() {
 if (ns4) {
  skn.visibility = "hidden";
 }
 else if (ns6 || ie4) skn.display = "none"
}
//]]>
</script>

Cara Menggunakan :

Buatlah link dalam bentuk seperti ini :

Kode link Fixed Popup Text Box:

<a href="http://gubhugreyot.blogspot.com" onMouseOver="popup('Popup Text Box mempunyai fungsi hampir sama dengan tooltip, hanya pada popup text box, tips akan dimunculkan ditengah-tengah halaman blog. Ini berbeda dengan tooltip yang selalu mengikuti cursor.')"; onMouseOut="remove_popup()">D E M O : Popup Text Box</a>