Zoom Image Using Script

Zoom image bekerja menggunakan javascript dan dipadukan dengan kode css. Fungsi utama javascript sebagai zoomer, sedang kode css membantu mengatur fungsi image dan zoom agar ketika image bertambah besar posisi seluruh elemen disekitarnya tidak terpengaruh. Kode CSS juga berfungsi untuk mengatur posisi image selalu disebelah kiri. Ini akan sama fungsinya dengan pengaturan yang dilakukan saat anda upload di halaman posting blogger. Jika anda menggunakan ini sebagai kelengkapan posting, maka anda tak perlu lagi menggunakan kode hasil upload. Gunakan saja URL hasil anda mengupload dan pasang URLnya di image zoom ini.

Arahkan saja cursor anda ke arah image maka image akan bertambah besar dengan sendirinya. Jangan kuatir bahwa elemen lain akan terganggu karena semua telah diatur dengan cukup baik melalui kode css. Anda juga tak perlu menyertakan kode selain URL seperti misalnya width dan height. Image ini dipatok dengan ukuran 200 x 150 pixel (width x height). Sebuah ukuran yang aku kira tak terlalu besar atau terlalu kecil sebagai sebuah image posting. Tentang image yang digunakan di image zoom? Gunakan saja gambar dengan ukuran tak lebih lebar dari halaman posting agar ketika zoom bekerja gambar tidak melebar hingga sidebar kanan.

Penggunaan kode html <div style="clear;both;"></div> kadang-kadang diperlukan untuk sebuah elemen yang menggunakan floating position (float-left; dan float:right;) seperti yang digunakan di image zoom ini. Gunakan saja kode tersebut saat anda akan menggunakan image zoom lebih dari satu kali dan benar-benar diperlukan.

Bagaimana membuatnya?

Tutorial

Klik link tutorial di bawah ini untuk mendapatkan tutorialnya:

Tutorial: Zoom Image dg Javascript