Zoom Hover Mouse / Disentuh Kursor Mouse Gambar Perlahan Membesar

Manis juga kalau diblog kita setiap gambarnya disentuh kursor mouse gambar/image/icon-nya perlahan membesar.Biar tidak panjang cerita kita langsung aja pasang script hover mouse zoom image. :)

1. Pertama:
   login di Blogger untuk edit blog kesayangan anda dengan account Google dan password spesial anda.
2. Ke-Dua:
   klik tab Rancangan dan di susul dengan klik edit HTML
   
3. Ke-Tiga:
   klik Download Template Lengkap, simpan hasil unduhan file xml di dalam komputer anda
   waspada itu lebih baik dari pada ntar nyesal :)
4. Ke-Empat:
   centang Expand Template Widget, biar semua isi template anda terlihat keseluruhannya
   
5. Ke-Lima:
   cari code </head>
   
   ( cara cepat mencari kata/word didalam halaman edit HTML: tekan tombol CTRL + F )
   
   

   Letakkan kode berikut di atasnya
   <style type='text/css'>
   {border: none;vertical-align: top;}
   </style>
   <script type='text/javascript'>
   //<![CDATA[
   if (document.images){
   (function(){
   var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
   var expConIm = function(im){
   im = im || window.event;
   if (!expConIm.r.test (im.className))
   im = im.target || im.srcElement || null;
   if (!im || !expConIm.r.test (im.className))
   return;
   var e = expConIm,
   widthHeight = function(dim){
   return dim[0] * cos + dim[1] + 'px';
   },
   resize = function(){
   cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
   im.style.width = widthHeight (e.ims[i].w);
   im.style.height = widthHeight (e.ims[i].h);
   if (e.ims[i].d && times > e.ims[i].jump){
   ++e.ims[i].jump;
   e.ims[i].timer = setTimeout(resize, speed);
   } else if (!e.ims[i].d && e.ims[i].jump > 0){
   --e.ims[i].jump;
   e.ims[i].timer = setTimeout(resize, speed);
   }
   }, d = document.images, i = d.length - 1;
   for (i; i > -1; --i)
   if(d[i] == im) break;
   i = i + im.src;
   if (!e.ims[i]){
   im.title = '';
   e.ims[i] = {im : new Image(), jump : 0};
   e.ims[i].im.onload = function(){
   e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
   e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
   e (im);
   };
   e.ims[i].im.src = im.src;
   return;
   }
   if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
   e.ims[i].d = !e.ims[i].d;
   resize ();
   };
   expConIm.ims = {};
   expConIm.r = new RegExp('\\bexpando\\b');
   if (document.addEventListener){
   document.addEventListener('mouseover', expConIm, false);
   document.addEventListener('mouseout', expConIm, false);
   }
   else if (document.attachEvent){
   document.attachEvent('onmouseover', expConIm);
   document.attachEvent('onmouseout', expConIm);
   }
   })();
   }
   //]]>
   </script>

6. Ke-Enam
   Simpan Template

selesai dech.


selanjutnya buka halaman posting atau halaman HTML yang ingin anda tautkan image/gambar
Gunakan Kode HTML image berikut:

<img class="expando" border="0" src="URL GAmbar Anda" width="150" height="150">

ganti URL GAmbar Anda dengan URL image/gambar anda

apa bedanya kode diatas dengan code HTML image/gambar seperti biasa yang kita gunakan? bedanya kode image ditambah
class="expando" di depan img menjadi <img class="expando"
sekarang setiap image/gambar yang anda masukkan di dalam kolom posting dan widget HTML yang di bumbui dengan kode class="expando" maka gambar tersebut setiap di sentuh mouse atau kursor mouse berada di atas gambar jangan tekejut kalau gambarnya membesar.

ini baru benar-benar selesai tips and trick Zoom image Cursor Mouse Hover (Gambar membesar saat Kursor Mouse berada diatas Image ). Trick ini rumayan bisa menghibur pengunjung/visitor blog anda

dicoba ya!

demo Zoom Hover Mouse