Kali ini saya ingin berbagi dengan agan2 semua tentang bagaimana cara membuat "Images Zoom" yang sangat menarik dan patut dicoba tentunya. Ok, daripada lama ga' jelas mending langsung kita mulai aja ... yang pertama buka notepad atau editor lainnya setelah itu copas code dibawah ini.
-------------------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zoom Images - mootools</title>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/bumpbox.js"></script>
</head>
<body>
<table width="40%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7" valign="top"> </td>
</tr>
<tr>
<td colspan="7" valign="top"> </td>
</tr>
<tr>
<td colspan="7" valign="top"> </td>
</tr>
<tr>
<td colspan="7" valign="top">
</td>
</tr>
<tr>
<td colspan="7" valign="top"> </td>
</tr>
<tr>
<td colspan="7" valign="top"> </td>
</tr>
<tr>
<td colspan="7" valign="top"> </td>
</tr>
<tr>
<td colspan="7" valign="top"> </td>
</tr>
<tr>
<td colspan="7" valign="top"> </td>
</tr>
<tr>
<td colspan="7" valign="top"><marquee behavior="alternate">Sample images zoom menggunakan mootools 1.2.1</marquee></td>
</tr>
<tr>
<td width="23%" valign="top"><div align="center"><a href="images/imutz banget.jpg" class="bumpbox" rel="300-450"><img src="images_small/imutz banget.jpg" width="120" height="175" border="0" /></a></div></td>
<td width="1%" valign="top"> </td>
<td width="23%" valign="top"><div align="center"><a href="images/Cewek Seksi.jpg" class="bumpbox" rel="300-450"><img src="images_small/Cewek Seksi.jpg" width="120" height="175" border="0" /></a></div></td>
<td width="2%" valign="top"> </td>
<td width="23%" valign="top"><div align="center"><a href="images/816881236352661.jpg" class="bumpbox" rel="300-450"><img src="images_small/816881236352661.jpg" width="120" height="175" border="0" /></a></div></td>
<td width="1%" valign="top"> </td>
<td width="12%" valign="top"><div align="center"><a href="images/816881275603115.jpg" class="bumpbox" rel="300-450"><img src="images_small/816881275603115.jpg" width="120" height="175" border="0" /></a></div></td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
alo sudah selesai copas-nya simpan dengan nama "index.htm" tanpa tanda ("). Selamat mencoba ...
Lihat Demo bisa dilihat disini :
Versi Demo
Download Source code
