Cara membuat tombol pengganti backround image

JUDUL : MEMBUAT TOMBOL PENGGANTI BACKROUND IMAGE

Artikel Terkait

----------------------------------------------------------------------------------

Tutorial ini sekedar untuk variasi dari background blog. Kode yang digunakan merupakan modifikasi dari tutorial sebelumnya yaitu PASANG TOMBOL PENGGANTI BACKGROUND BLOG
Hanya bedanya tips ini backgroundnya berupa image.

Demo : Coba anda klik salah satu warna untuk mengganti background image. Jika hasilnya belum tampil, ada kemungkinan komeksi internetnya kurang baik atau ada gangguan loading dari stus tempat menyimpan gambar> Coba anda tunggu beberapa saat untuk melihat hasilnya.

Cara membuatnya tidak terlalu sulit, anda hanya memerlukan beberapa image/gambar yang ukurannya telah diatur dengan lebar 1704 pixel dan tingginya 886 pixel (bisa di resize dengan menggunakan Adobe Photoshop). Ukuran tersebut akan muncul penuh pada backgroud blog. Setelah memiliki beberapa gambar yang akan dijadikan background blog, berikutnya anda upload ambar-gambar tersebut pada hosting penyimpanan gambar seperti Photobucket, Imageshack atau lainnya.

Kode yang digunaan seperti dibawah ini :

<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script><table width="100%" height="15px" border="1px">
<tbody><tr style="text-align: center;font-weight:bold; color:yellow;">
<td onclick="bgChange('url(http://img84.imageshack.us/img84/2685/bg6d.jpg) repeat-x fixed top center')" bgcolor="#2E0000">1</td>
</tr>
</tbody></table>

Keterangan :

style="text-align: center;font-weight:bold; color:yellow; merupakan kode untuk penampilan tulisan (dalam contoh berupa nomor urut). Pengaturan tersebut menunjukan bahwa hurufnya tebal, warna kuning dan terletak ditengah.
http://img84.imageshack.us/img84/2685/bg6d.jpg merupakan alamat/url gambar yang akan tampil jika diklik, Dapat anda gati dengan alamat/url gambar milik anda.
bgcolor="#2E0000 merupakan warna yang tampil pada tombol. Dapat anda ganti dengan kode warna pilihan anda.
1 merupakan tulisan yang tampil pada tombol warna

Kode diatas akan tampil seperti ini :

Jika anda ingin menampilkan background lebih dari satu tinggal menambahkan kode seperti dibawah ini :

<td onclick="bgChange('url(http://img36.imageshack.us/img36/9214/44128720.jpg) repeat-x fixed top center')" bgcolor="#6AA366">Image2</td>

Kemudian gabungkan dengan kode diatas tadi, sehingga susunanya seperti ini :

<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script><table width="100%" height="15px" border="1px">
<tbody><tr style="text-align: center;font-weight:bold; ">
<td onclick="bgChange('url(http://img84.imageshack.us/img84/2685/bg6d.jpg) repeat-x fixed top center')" bgcolor="#2E0000">1</td>
<td onclick="bgChange('url(http://img36.imageshack.us/img36/9214/44128720.jpg) repeat-x fixed top center')" bgcolor="#6AA366">Image2</td>
</tr>
</tbody></table>

Jadinya akan seperti ini :

Silahkan anda tambah kode untuk menampilkan background sebanyak yang anda suka.
Atau jika masih belum paham dengan uraian diatas, coba anda copas kode dibawah ini (Kode yang digunakan seperti pada demo diatas.

<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script><table width="100%" height="15px" border="1px">
<tbody><tr style="text-align: center;font-weight:bold; color:yellow;">
<td onclick="bgChange('url(http://img84.imageshack.us/img84/2685/bg6d.jpg) repeat-x fixed top center')" bgcolor="#2E0000">1</td>
<td onclick="bgChange('url(http://img26.imageshack.us/img26/8659/bg1sj.jpg) repeat-x fixed top center')" bgcolor="#570000"> 2</td>
<td onclick="bgChange('url(http://img51.imageshack.us/img51/3595/bg7qh.jpg) repeat-x fixed top center')" bgcolor="#141543">3</td>
<td onclick="bgChange('url(http://img23.imageshack.us/img23/5633/55364836.jpg) repeat-x fixed top center')" bgcolor="#434351">4</td>
<td onclick="bgChange('url(http://img3.imageshack.us/img3/6030/img36a.jpg) repeat-x fixed top center')" bgcolor="#154511">5</td>
<td onclick="bgChange('url(http://img36.imageshack.us/img36/9214/44128720.jpg) repeat-x fixed top center')" bgcolor="#6AA366">6</td>
<td onclick="bgChange('url(http://img251.imageshack.us/img251/7420/bg3ow.jpg) repeat-x fixed top center')" bgcolor="#423215">7</td>
<td onclick="bgChange('url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg) repeat-x fixed top center')" bgcolor="#88672B">8</td>
</tr>
</tbody></table>