راهنمای استفاده
کد را مطابق نمونه در دو بخش head و body صفحه قرار دهید. فایل های ضمیمه شامل تصاویر نمونه و فایل های جاوا اسکریپت را در ادامه مطلب دریافت و آدرس عکس ها و فایل ها را مطابق با مسیر مورد نظر خود اصلاح نمایید. با تکرار کلاس های temp و temphol تعداد تصاویر را به میزان دلخواه افزایش دهید. با تغییر اندازه ابعاد تعریف شده در کلاس های مذکور، اندازه تصاویر را مطابق سلیقه خود تغییر دهید.
<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> |