تغییر عکس نمایش داده شده توسط یک تگ img ، در JavaScript
همان طور که می دانید، تگ img در HTML برای نمایش یک عکس به کار می رود ( کلید شماره 507 ). به عنوان مثال :
که در آن، آدرس عکسی که باید نمایش داده شود را در مشخصه src نوشته ایم.
در JavaScript ، ما می توانیم با تغییر آدرس تعیین شده برای مشخصه src از تگ img ، عکس نمایش داده شده توسط آن را تغییر بدهیم.
قبل از هر چیز، باید یک id منحصربفرد برای تگ img مورد نظر تعیین کنیم :
سپس، کد JavaScript زیر را می نویسیم :
با کد بالا تعیین کرده ایم که در تگ img دارای id برابر Kelidestan_ID ، مقدار تعیین شده برای مشخصه src آن به NewImage.png تغییر کند. بنابراین یک عکس جدید توسط تگ img مورد نظر، نمایش داده می شود.
به مثال زیر توجه کنید :
در یک صفحه HTML ، یک عکس را با تگ img نمایش می دهیم، همچنین یک دکمه (button) در صفحه قرار می دهیم که با کلیک کاربر بر روی آن، عکس نمایش داده شده توسط تگ img تغییر کند :
تعیین کرده ایم که اگر بر روی دکمه (button) کلیک شود، آنگاه تابع clickHandler در کدهای JavaScript اجرا گردد ( کلید شماره 2687 ). تعریف تابع clickHandler به صورت زیر می باشد :
بنابراین با اجرای تابع clickHandler ، کد زیر که برای تغییر عکس می باشد، اجرا خواهد شد :
نتیجه :
اگر بر روی دکمه (button) کلیک نمایید، عکس نمایش داده شده، تغییر می کند :
نام چجوری میشه کاری کرد که اگه دوباره کلیک بکنیم به تصویر اول برگرده؟
ارین بنظرم میتونی یه‌متغیر گلوبال تعریف ونی بهش مقدار ۰ بدی وقتی رو دکمه کلیک میکنی بهش یکی اضافه شه
برای هر عکس یه فانکشن جدا تعریف میکنی ۵
حالا شریط میکنی دز صورت زوج بودن عدد ، عکس دوم]فانکشن دوم] و در صورت فرد بودن، عکس اول[فانکشن اول] فراخانی بشه و نمایش بده