Image Selector dengan Effect Transisi Opacity

Bentuk penggabungan dari backckground image yang berupa animasi gif dipadukan dengan effect transisi gambar menggunakan javascript yang memanfaatkan opacity akhirnya menghasilkan sebuah effect yang fantantis dari sebuah image selector. Effect transisi setiap pergantian image juga bisa di atur sehingga bisa dilakukan perubahan oleh pengguna hanya melalui perubahan kecil yang dilakukan di ruang posting. Dengan kata lain ; tidak perlu repot-repot selalu mengobrak-abrik javascriptnya! Keuntungan penggunaan javascript "bgsGRmultifungsi.js" ini adalah bisa digunakan untuk menciptakan effect image dalam bentuk yang lain dengan tetap mengacu pada fungsi opacity.

D E M O

Javascript :

<script type="text/javascript">
//<![CDATA[
function BGS_GR_blor(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    if (opacStart > opacEnd) {
        for (i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    } else if (opacStart < opacEnd) {
        for (i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    }
}
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
function BGS_GR_blor(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    changeOpac(0, imageid);
    document.getElementById(imageid).src = imagefile;
    for (i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
        timer++;
    }
}
//]]>
</script>

Kode CSS :

span.controllmu{width:60px;display:inline-block;padding:4px 6px;background:#333 url(http://www.abchoes.com/images/textbg.png);color:#f00;margin:0 0 6px 1px;border:2px solid #777;border-right:2px solid #888;text-align:center;}
span.controllmu:hover{background:#900;color:#fff;}

Javascript :

<div style="float:left;background:#333;padding:4px;margin:5px 15px 5px 0;border-radius:4px;">
<a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'image-01.jpg',500)"><span class="controllmu">Image-1</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'image-02.jpg',500)"><span class="controllmu">Image-2</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'image-03.jpg',500)"><span class="controllmu">Image-3</span></a>
<div id="pics" style="background:url(https://lh4.googleusercontent.com/-Stz6oRyVlgA/T2z8v9rMwdI/AAAAAAAAAfg/LWZluvASP-8/h340/anima-80x10.gif);border:4px ridge orange;width:223px;">
<img style="filter:alpha(opacity=70);opacity:0.7;" id="BGS_GR_blor" src="image-04.jpg"/>
</div>
</div>

Cara membuat Image Selector :

1. Login ke Blogger.
2. Dasbor : Klik "Rancangan (Design)".
3. Klik "Edit HTML".
4. Lakukan "Backup Template"
5. Cari kode ]]></b:skin>, kemudian copy dan pastekan kode CSS di atasnya.
6. Copy dan pastekan javascript di bawah ]]></b:skin>
7. Klik "Simpan Template/Save Template".
8. Gunakan xHTML di box posting atau "Add a Gadget » HTML/Javascript".
9. Selesai!

Catatan/Keterangan :

1. image-01.jpg s/d image-04.jpg » height=224px
2. Panduan lengkap tentang cara menyimpan javascript, kode css dan xHTML serta cara backup template dan cara cepat mencari kode dapat dibuka di Special Tutorials (menu sebelah kiri halaman).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update »Setu PAHING, Maret, 24, 2012

» Happy Blogging - gubhugreyot «