افکت تصویر کاربردی و زیبا با جی کوئری
<head>
<style type=”text/css”>
.temp {
margin: 0px 5px 5px; width: 250px;
}
.temphol {
width: 250px; height: 165px; overflow: hidden; position: relative;
}
.temphol img {
left: 0px; top: 0px; position: absolute;
}
</style>
<script type=”text/javascript” src=”../js/jquery-1.2.6.pack.js”></script>
<script type=”text/javascript” src=”../js/hover_effect.js”>
</script>
</head>
<body>
<table border=”0″ cellpadding=”0″ cellSpacing=”0″ style=”margin-top:10px” align=”center”>
<tr>
<td><div class=”temp”>
<div class=”temphol”><a href=”#”
target=”_blank”><img border=”0″ alt=”توضیحات” src=”../images/js_prev_pics/gall_pics/back.jpg”> </a><img src=”../images/js_prev_pics/gall_pics/sample1.jpg” alt=”دوره های آموزش حضوری” width=”250″ height=”165″ border=”0″
class=”front”></div>
</div></td>
<td><div class=”temp”>
<div class=”temphol”><a href=”#”
target=”_blank”><img border=”0″ alt=”توضیحات”
src=”../images/js_prev_pics/gall_pics/back.jpg”></a><img
src=”../images/js_prev_pics/gall_pics/sample2.jpg” alt=”توضیحات” width=”250″ height=”165″ border=”0″
class=”front”></div>
</div></td>
<td><div class=”temp”>
<div class=”temphol”><a href=”#”
target=”_blank”><img border=”0″ alt=”توضیحات”
src=”../images/js_prev_pics/gall_pics/back.jpg”></a><img src=”../images/js_prev_pics/gall_pics/sample3.jpg” alt=”توضیحات” width=”250″ height=”165″ border=”0″
class=”front”></div>
</div></td>
</tr>
<tr>
<td><div class=”temp”>
<div class=”temphol”><a href=”#”
target=”_blank”><img border=”0″ alt=”توضیحات” src=”../images/js_prev_pics/gall_pics/back.jpg”> </a><img
class=”front” border=”0″ alt=”توضیحات” src=”../images/js_prev_pics/gall_pics/sample4.jpg”></div>
</div></td>
<td><div class=”temp”>
<div class=”temphol”><a href=”#”
target=”_blank”><img border=”0″ alt=”توضیحات”
src=”../images/js_prev_pics/gall_pics/back.jpg”> </a><img
class=”front” border=”0″ alt=”توضیحات” src=”../images/js_prev_pics/gall_pics/sample5.jpg”></div>
</div></td>
<td><div class=”temp”>
<div class=”temphol”><a href=”#”
target=”_blank”><img border=”0″ alt=”توضیحات”
src=”../images/js_prev_pics/gall_pics/back.jpg”></a><img
src=”../images/js_prev_pics/gall_pics/sample6.jpg” alt=”توضیحات” width=”250″ height=”165″ border=”0″
class=”front”></div>
</div></td>
</tr>
</table>
</body>
کد را مطابق نمونه در دو بخش head و body صفحه قرار دهید. فایل های ضمیمه شامل تصاویر نمونه و فایل های جاوا اسکریپت را در ادامه مطلب دریافت و آدرس عکس ها و فایل ها را مطابق با مسیر مورد نظر خود اصلاح نمایید. با تکرار کلاس های temp و temphol تعداد تصاویر را به میزان دلخواه افزایش دهید. با تغییر اندازه ابعاد تعریف شده در کلاس های مذکور، اندازه تصاویر را مطابق سلیقه خود تغییر دهید
