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:
aduh bos blognya ditungin ama pihak ketiga ya, kalo di klik membuka link baru.met malem ya bos
hay, aku suka nieh yanng begini, beda dari yang lainnya, malah blog tutorial kebanyakan menulis cara modifikasi blog yg sudah2, suksesss yah..
Okey deh,... aku suka yang ini, terkadang aku temukan efek yang seperti ini di blog sahabat.
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!!!
Ko' ga' bisa..?
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..
Posting Komentar