Tips setting gambar pada shoutbox

Aku nak kongsi sikit ilmu tentang tips meng'adjust posisi gambar yang kita pasang pada shoutbox. Alaaa sikit ja, tapi amat bergunalah kepada sesiapa yang memerlukan.

Tips ni aku dapat hasil daripada experiment aku sendiri tau. Saya suka main ngan kod2 HTML..hehe...

<style type="text/css">

#gb{position:fixed; top:50px; z-index:+1000}

* html #gb{position:relative}

.gbtab{height:300px; width:195px; float:left; cursor:pointer; background:url('http://i1143.photobucket.com/albums/n633/fahmi911/pamikusb.png') no-repeat}

.gbcontent{float:left; border:5px solid #84229D; background:#DF91F2; padding:0px}

</style>

<script type="text/javascript">

function showHideGB(){var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0,195-w):moveGB(195-w,0); gb.opened = !gb.opened}

function moveGB(x0, xf){var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) >10 ? 5:1; var dir = xf>x0 ? 1:-1; var x = x0+dx * dir; gb.style.right = x.toString()+"px"; if(x0!=xf){setTimeout("moveGB("+x+","+xf+")",0)}

}

</script>

<div id="gb">

<div class="gbtab"onclick="showHideGB()">  </div>

<div class="gbcontent">

<!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="fahmi_haseok91" src="http://www.shoutmix.com/?fahmi_haseok91" width="100%" height="400" frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?fahmi_haseok91">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /><!-- End ShoutMix -->

<div style="text-align:right">

<a href="javascript:showHideGB()">

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb"); 

gb.style.right = (-68-gb.offsetWidth).toString()+"px"; 

</script>

Aku just highlight kan pada kod html di atas yang ber'bold saja sebab kod2 ni memainkan peranan yang penting ketika kita memasang gambar yang kita mau taruh kat shoutbox tu nanti.

- height:300px : untuk meng'adjust tinggi gambar kita tu. Ikutlah suka ati korang.

- width:195px : untuk mengubah posisi gambar ke kiri dan ke kanan, nombor besar akan ke kiri dan sebaliknya

- 0,195-w : untuk meng'adjust posisi shoutbox apabila kita hide'nya semula. Ini kita perlu buat experiment sendiri. Nak lebih cantik adjust melalui gambar kita tu dengan cara memastikan posisi gambar kita tu apabila shoutbox di hide, gambar tersebut ngam2 berdekatan dengan scroll up and down.

-195-w,0: ikut ja macam kat atas ni 0,195-w. Contoh: (0,200-w) = (200-w,0).

- -68-gb: fungsinya untuk menetapkan posisi shoutbox korang pada view yang pertama. Cara mau kesan posisi shoutbox tu adalah dengan cara membuat new view dengan me'refresh/reload blog korang tu. Then, korang akan nampak posisi asal shoutbox korang tu sebelum korang klik apa-apa pada shoutbox korang tu.

okay itu saja...kalau korang ada sebarang pertanyaan tinggalkan ja komen korang tu kat entri ni.

daaaaaa....