طراحی سایت و نمایش عکس از لیست Drop Down
ممکن است شما در طراحی سایت خود در صدد باشید تا عکس هایی را با توجه به انتخاب کاربران از میان لیست Drop Down انتخاب نمایید. برای مثال فرض نمایید شما می خواهید نمایشی از محصولات خود را با توجه به انتخابی که کاربر از میان لیست باز شو نموده است، فراهم نماییم. در این صورت کاربران نمایش واضحی از محصول و کالای انتخابی خود در طراحی وب سایت ما خواهد داشت و با نمایش گرافیکی خاص در سایت می توانیم موجب جلب نظر کاربر شویم که در سئو سایت تاثیرگذار خواهد بود در کنار آن امکانات زیبایی را در طراحی وب سایت خود فراهم می آورید.
بدین منظور قطعه کد زیر را در تگ <head> صفحه وب سایت درج نمایید.
<script language="javascript">
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>
حال قطعه کد زیر را در تگ <body> صفحه درج نمایید.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p>
<select name="picture" size="1" on-Change="showimage()">
<option selected value="me.gif">Picture of me</option>
<option value="myaunt.gif">Picture of my aunt</option>
<option value="brother.gif">Picture of my brother</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="/demo/me.gif" name="pictures" width="99" height="100"></td>
</tr>
</table>
می توانید آدرس تصویر مورد نظر خود را در کد زیر تغییر دهید.
<option selected value="me.gif">Picture of me</option>
و همچنین در کد زیر می توانید سایز عکس را مطابق میل خود وارد نمایید.
<img src="/demo/me.gif" name="pictures" width="99" height="100">
به آسانی با در درج کدهای بالا می توانید امکانات زیبا را در طراحی وب سایت خود درج نمایید.
منبع: طراحی سایت و نمایش عکس از لیست Drop Down
