Trik Komputer: Thumbnail Hover Image File Blogger

Thumbnail image dengan trik hover dulu masih terbatas karena belum munculnya CSS3. Sekarang kita dapat lebih leluasa dalam menggunakan atribut hover karena sudah hadirnya CSS3. Efek hover itu bermacam-macam jenis, ada bayangan, warna, hingga size (kalo bener) :D Kali ini Beben Koben si bloglang anu ganteng kalem tea akan berbagi hover image thumbnail effect. Jaman jebut waktu mau efek seperti ini bisa lihat di . Sebenarnya hasil efek disini yaitu memperbesar gambar dari ukuran normal menjadi luar biasa. Ketika disorot cursor jadi besar, dan yang melihat pasti terpana dengan keindahan trik tersebut :"> Contoh simpel hover/zoomer effect thumbnail with CSS3

Kode CSS3

.advert {
width:125px;
height:125px;
}
.advert:hover {
/* safari / chrome */
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-out;

/* mozilla */
-moz-transform:rotate(360deg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;

/* opera */
-o-transform:rotate(360deg) scale(2);
-o-transition-duration:500ms;
-p-transition-timing-function: ease-out;

/* ie */
-ms-transform:rotate(360deg) scale(2);
-ms-transform-duration:500ms;
-ms-transform-timing-function: ease-out;
}

Pemakaian dalam memanggilnya dalam postingan sobat hanya perlu membubuhkan class "advert"<img class="advert" src="http://your-link-image.jpg" alt="" />Resource by: David Walsh Blog .
Simpel kan sob, sok silahkan pake kalo minat ;) Apabila dalam biasanya itu dinamakan dengan onmouseover Event bisa dilihat . Ex:

Biar lebih full stylish dalam mendapatkan fitur ini, bagaimana jika kita buat yang edan punya!!!
Namanya ini lain lagi bro yaitu "Expando Image" ya tapi tetep sama efek yg dihasilkan namun lebih edan punya ;))

Expando Image Script

<style type="text/css">
img.expando{
border: none;
vertical-align: top;
}
</style>

<script type="text/javascript">
/*
Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
//<![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>

Pada penjelasan penempatan itu si bumbu² dibawah tag <head> but sobat bisa coba letakinnya diatas tag </body> (rekomendasi para ahli) ;)) Pemanggilan or make dalam postingan syntax penulisan tinggal menambahkan atribut class "expando" jadinya koyok ngene...<img class="expando" src="http://your-link-image.jpg" width="100" height="100" alt="" >

Amigos permios parantos yuk babay aaahhh...prikitiw
Happy hover, zoomer, expando or what they say \m/

Trik Komputer

Senin, 02 Mei 2011

Thumbnail Hover Image File Blogger

Kode CSS3

Expando Image Script

Tidak ada komentar:

Posting Komentar