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..
0 responses to "Zoom Images"