ممکن است شما در طراحی سایت خود در صدد باشید تا عکس هایی را با توجه به انتخاب کاربران از میان لیست 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">
به آسانی با در درج کدهای بالا می توانید امکانات زیبا را در طراحی وب سایت خود درج نمایید.