All post

Sabtu, 27 Desember 2008

Zoom image

Zoom pada gambar membuat org lebih mudah melihat gambar tersebut, berikut adalah onMousOver zoom atau gambar akan ukuranya lebih besar jika cursor di letakan pada gambar tersebut,gambar tersebut .
langsug aja nih sebagai contoh berikut,sory saya ikut nampang sebagai contoh.. Geser cursor pada gambar..




Caranya seperti berikut ini dengan edit template yang biasa km lakukan,pasti punya cara2 tersendiri,
Copy code berikut ini


<script language="JavaScript"> function setZoom(img, dir, width, height, margin, zIndex, delay) { setTimeout(function() { if (img.dir==dir) { img.style.width=width; img.style.height=height; img.style.margin=margin; img.style.zIndex=zIndex; img.parentNode.parentNode.style.zIndex=zIndex; } }, delay); } function larger(img, width, height) { img.dir='rtl'; now=parseInt(img.style.zIndex); for (i=now+1; i<=10; i++) { w=(width*(10+i))/20+'px'; h=(height*(10+i))/20+'px'; m=(-i)+'px 0 0 '+(-width*i/40)+'px'; setZoom(img, 'rtl', w, h, m, i, 20*(i-now)); } } function smaller(img, width, height) { img.dir='ltr'; now=parseInt(img.style.zIndex); for (i=now-1; i>=0; i--) { w=(width*(10+i))/20+'px'; h=(height*(10+i))/20+'px'; m=(-i)+'px 0 0 '+(-width*i/40)+'px'; setZoom(img, 'ltr', w, h, m, i, 20*(now-i)); } } </script>
Setelah selesai cari tag </head> trus paste diatas tag </head>
Lalu pada <body> format gambar seperti brikut ini
<div class="preview" style="width:80px;height:80px;float:left; padding-left:20px;"> <a href=""><img class="preview" style="width:80px;height:60px;border:1px solid # 000000;z-index:0" src="gambar.jpg" alt="" onmouseover="larger(this,240,180)" onmouseout="smaller (this,160,120)" /></a> </div>
keterangan gambar.jpg Adalah gambar yang akan dimunculkan,lalu 240,180 adalah ukuran gambar setelah di besarkan ganti ukuran menurut besar gambar yang di mau,160,120 adalah ukuran gambar sebelum di besar kan..

6 komentar:

NAZA LUCKZANA 28 Desember 2008 20.18  

aduh bos blognya ditungin ama pihak ketiga ya, kalo di klik membuka link baru.met malem ya bos

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : NAZA LUCKZANA
Website : https://www.blogger.com/profile/03594327668015919300
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Aku 30 Desember 2008 05.37  

hay, aku suka nieh yanng begini, beda dari yang lainnya, malah blog tutorial kebanyakan menulis cara modifikasi blog yg sudah2, suksesss yah..

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Aku
Website : https://www.blogger.com/profile/04577886387461663222
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Seti@wan Dirgant@Ra 29 April 2009 13.43  

Okey deh,... aku suka yang ini, terkadang aku temukan efek yang seperti ini di blog sahabat.

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Seti@wan Dirgant@Ra
Website : https://www.blogger.com/profile/11782379445543111592
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Nur Rachmat 3 Mei 2009 20.42  

ga bisa bro.. erro xmlnya..
mohon penjelasannya

nice articles.


___________________________________________
visit my blog
1. info kaki palsu 2. Prosthetic and Orthotic 3. Nur Rachmat Tips dan Trick ___________________________________________
Mengajak teman-teman Blogger semua untuk:
1. saling berkunjung
2. tukeran link
3. saling follow di Google friend connect
Salam Blogger!!!

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Nur Rachmat
Website : https://www.blogger.com/profile/00511774977692064342
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Lela 29 Juni 2009 18.05  

Ko' ga' bisa..?

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Lela
Website : http://blogumulus.blogspot.com
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
Lela 29 Juni 2009 18.50  

Mas, tolong kasih kode yang manjur. Soalnya, kode yang mesti diletakin di atas </head> itu bila dipasang selalu ditolak (pesan err mulu). Ditunggu revisinya ya, makasih..

Kunjungi Juga Blognya Yang Berkomentar Yah... :p
Nama : Lela
Website : http://blogumulus.blogspot.com/2009/06/libur-panjang-enaknya.html
->> Meloncat Ke Kotak KomentaratauKembali ke komentar Teratas <<-
Terima kasih kunjunganya,kunjungi juga blog q yg :disini
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Poskan Komentar