article

کاربرد تگ img و نمایش تصاویر در HTML

html-img-tag

علاوه بر متن ساده، تصاویر از جمله محتوای پرکاربرد قابل نمایش در صفحات وب هستند و HTML بدین منظور تگ img را درنظر گرفته است، تگ نمایش تصاویر یا img امکان نمایش تصویر در صفحات وب (سایت ها، وبلاگ ها و...) را میسر می کند و می تواند ویژگی های دیگری از جمله alt، title، map، area، border و... داشته باشد که قابلیت های بیشتری در ظاهر، نحوه پردازش و کنترل رفتارهای مبتنی بر رویداد مانند تعیین محل کلیک کاربر در اختیارمان قرار می دهند، استفاده صحیح از تگ img علاوه بر اینکه به لحاظ استاندارد کدنویسی دارای اهمیت است در دانش سئو (SEO یا بهینه سازی صفحات وب برای موتورهای جستجو) فاکتور موثری محسوب می شود، در ادامه آموزش های مقدماتی HTML این مطلب را به نحوه کاربرد تگ img و نمایش تصاویر در صفحات وب اختصاص داده ایم.

تگ img در HTML


همان طور که گفتیم از تگ img برای نمایش تصویر در صفحات وب استفاده می شود، این تگ باید به همراه ویژگی src درج شود و عبارت src در واقع مخفف source یا مسیر (path) منبع تصویر است که در اینجا آدرس کامل تصویر یا آدرس آن به صورت دایرکتوری مد نظر است، مثال زیر نحوه نمایش یک تصویر ساده را در وب نشان می دهد:
<img src="photo.jpg">
با توجه به نمونه کد بالا باید فایل فرضی photo.jpg در کنار فایل HTML در یک دایرکتوری موجود باشند.
نکته: تگ img به صورت تکی (Singleton) است و نیازی به بستن آن با تگ img دیگری نیست.

ویژگی alt در تگ img


برای اینکه مرورگر به نحو درستی تصاویر را پردازش کرده و نمایش دهد بهتر است در کنار تگ img از خاصیت های جانبی آن استفاده کنیم، اولین خاصیت ویژگی alt یا متن جایگزین تصویر است، alt در واقع متنی است که اگر تصویر به هر دلیل بارگذاری نشود جایگزین قاب خالی محل درج تصویر خواهد شد و به نوعی راهنمای کاربران است تا حداقل از محتوای تصویر مطلع شوند.
<img src="photo.jpg" alt="My Photo">

ویژگی title در تگ img


علاوه بر ویژگی alt که متن جایگزین تصویر است، از ویژگی title می توانیم برای هنگامی که کاربر ماوس را روی تصویر می برد جهت نمایش پیام به صورت بالن (Tooltip) استفاده کنیم، مقدار این ویژگی متن برای توضیح بیشتر در مورد تصویر است.
<img src="photo.jpg" alt="My Photo" title="نمایش تصویر در HTML">
هنگامی که کاربر نشانه گر ماوس را روی تصویر فرضی photo.jpg ببرد متن "نمایش تصویر در HTML" به صورت بالن ظاهر خواهد شد.

ویژگی width و height در تگ img


برای اینکه ارتفاع و عرض تصویر را در صفحات وب تعریف کنیم از دو ویژگی width و height در کنار سایر ویژگی های تگ img استفاده می کنیم، انجام این کار مخصوصا از نظر کسب رتبه بهتر در سئو و موتورهای جستجو اهمیت زیادی دارد.
<img src="photo.jpg" alt="My Photo" title="نمایش تصویر در HTML" width="200" height="100">
در ویژگی width و height مقادیر به صورت پیکسلی در نظر گرفته می شوند.
نکته: با توجه به اینکه امروزه کاربران از طیف وسیعی از دستگاه ها (موبایل، تبلت، لپ تاپ و...) برای پیمایش صفحات وب استفاده می کنند که ممکن است اندازه صفحه نمایش کوچکتری نسبت به مانیتورهای متداول داشته باشند، معمولا از استایل CSS برای ایجاد حالت تصاویر واکنشگرا (Responsive) استفاده می شود:
<style>
img {
    width: 100%;
}
</style>
در این خصوص در آموزش های مقدماتی CSS مفصلا صحبت خواهیم کرد.

ویژگی border در تگ img


از ویژگی border مخصوصا در مواقعی که به تصویر خود لینک می دهیم برای حذف حاشیه ها استفاده می شود، در برخی مرورگرها وقتی یک تصویر به صورت لینک شده (با تگ a) باشد در حالت پیش فرض نوار معمولا آب رنگی به عنوان حاشیه تصویر در نظر گرفته می شود، برای حذف این حالت می توانیم مقدار صفر را برای ویژگی border در نظر بگیریم، به طور مثال:
<img src="photo.jpg" alt="My Photo" title="نمایش تصویر در HTML" width="200" height="100" border="0">
نکته: در نسخه 5 HTML این ویژگی منسوخ شده و نباید دیگر استفاده شود، به جای ویژگی border می توانیم از معادل CSS آن استفاده کنیم:
<style>
img {
    border: 0;
}
</style>
مقادیر در این ویژگی عمدتا به صورت پیکسلی در نظر گرفته می شود.
کاربرد ویژگی border صرفا برای حذف خطوط حاشیه ای نیست، در صورت نیاز برای ترسیم این خطوط نیز می توانیم از خاصیت border در CSS استفاده کنیم:
<style>
img {
    border: 1px solid #E5E5E5;
    padding: 4px;
}
</style>
با در نظر گرفتن مقدار برای خاصیت padding خط ترسیم شده از لبه های تصویر به میزان 4 پیکسل فاصله می گیرد که جلوه ظاهری بهتری ایجاد خواهد کرد.

ویژگی usemap در تگ img


ویژگی هایی که پیشتر گفتیم معمولا برای اغلب تصاویر در صفحات وب کفایت می کنند، اما برای ایجاد قابلیت های تعاملی بیشتر در صورت نیاز می توانیم از خاصیت usemap و تگ های map و area برای تعریف نقاط قابل کلیک در تصویر استفاده کنیم، گاهی نیاز است که بیش از یک لینک را در تصویر قرار دهیم یا بخش خاصی از آن را قابل کلیک شدن کنیم، این دسته از قابلیت ها با خاصیت usemap در تگ img بر روی تصاویر قابل اعمال هستند، به طور مثال:
<img src="photo.jpg" alt="My Photo" title="نمایش تصویر در HTML" width="200" height="100" border="0" usemap="#map-id">
<map name="img-map" id="map-id">
<area shape="rect" coords="100,120,250,170" alt="محدوده مستطیل مربع" href="image-page-1.html">
<area shape="poly" coords="30,180,150,155,180,230" alt="محدوده چند ضلعی" href="image-page-2.html">
<area shape="circle" coords="50,60,20" alt="محدوده دایره ای" href="image-page-3.html">
</map>
نکته مهم در این حالت استفاده درست از شکل اشیاء و نحوه مقداردهی محدوده ای از تصویر است که می خواهیم قابل کلیک شدن باشد، سه مقدار circle ،poly و rect برای قسمت shape در area کاربرد دارند:
- rect به معنی rectangle یا مربع مستطیل (چهار ضلعی) است.
- poly یک شیء چند ضلعی است.
- circle برای ترسیم محدوده قابل کلیک شدن به شکل دایره کاربرد دارد.
نکته 1: همان طور که در نمونه کد مشخص است مقادیر ویژگی usemap آی دی در نظر گرفته شده برای تگ map است.
نکته 2: برای مشاهده پیش نمایش آنلاین خاصیت usemap و تگ های map و area لطفا به انتهای این آموزش مراجعه کنید.

نحوه تنظیم مقادیر area در تگ map


برای اینکه نقاط قابل کلیک شدن تصاویر را به درستی تعریف کنیم باید با نحوه مقداردهی صحیح برای شکل های متفاوت در تگ area آشنا باشیم:
- برای تعیین محدوده اشیاء rect یا مربع مستطیل (چهار ضلعی) در تصویر به ترتیب از چهار عدد به عنوان تعیین فاصله اضلاع محدوده، ضلع چپ از سمت چپ (left)، ضلع بالا از سمت بالا (top)، ضلع راست از چپ به راست (right) و ظلع پائین از بالا به پائین (bottom) استفاده می شود، به عبارتی میزان فاصله چهار ضلع از سمت چپ و بالای تصویر و همچنین به سمت راست و پائین تصویر را برای قابل کلیک بودن تعریف می کنیم:
<area shape="rect" coords="0,0,100,100" href="https://webgoo.ir">
- برای محدوده اشیاء چندگانه یا poly باید از 6 مقدار یا بیشتر استفاده کنیم، این مقادیر به صورت x1,y1,x2,y2,x3,y3 نقاطی را به هم متصل و موقعیت محل قابل کلیک شدن را به شکل چند ضلعی ترسیم می کنند:
<area shape="poly" coords="25,100,120,50,260,220" href="https://webgoo.ir">
- نهایتا برای محدوده اشیاء دایره ای شکل یا circle باید سه مقدار فاصله مرکز دایره از سمت چپ، بالا و شعاع (center-x، center-y و radius) را تعیین کنیم:
<area shape="circle" coords="100,100,40" href="https://webgoo.ir">
نکته: برای مشاهده پیش نمایش آنلاین خاصیت usemap و تگ های map و area لطفا به انتهای این آموزش مراجعه کنید.
HTML Map Area
برای سهولت کار می توانیم تصویر مورد نظر را در برنامه Paint ویندوز اجرا و از قسمت View گزینه Ruler را انتخاب نمائیم، در این حالت با بردن نشانه گر ماوس روی نقاط مختلف تصویر مختصات پیکسلی در گوشه چپ برنامه نمایش داده می شود.

پیش نمایش آنلاین


برای بررسی تمام ویژگی هایی که در این آموزش مرور کردیم می توانیم از کد و پیش نمایش آنلاین زیر استفاده کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمايش تصوير در صفحات وب</title>
<!-- Webgoo.ir -->
<style>
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
img{
border: 0;
}
area{
    border: 1px solid #c00;
}
</style>
</head>
<body>
<img src="example-image.jpg" alt="Example Image" title="نمونه تصوير در HTML" width="338" height="338" usemap="#img-map">
<map name="img-map" id="img-map">
<area shape="rect" coords="26,150,130,185" alt="محدوده مستطيل مربع" href="#1">
<area shape="poly" coords="13,294,67,252,112,317" alt="محدوده چند ضلعي" href="#2">
<area shape="circle" coords="275,245,50" alt="محدوده دايره اي" href="#3">
</map>
<hr>
براي بررسي ويژگي usemap و تگ هاي map و area ماوس را بر روي نقاط مختلف تصوير ببريد.
</body>
</html>
پیش نمایش آنلاین
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» کار با تگ فرم (form) در HTML
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
» آشنایی با HTML، زبان پایه کدنویسی وب
» نحوه ایجاد لینک در HTML
» کاربرد تگ font و ویژگی های فونت در HTML
commentنظرات (۵۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: roya
۱۹:۳۲ ۱۳۹۱/۱۰/۱۰
ممنونم
نویسنده: Tesla
۲۳:۴۹ ۱۳۹۲/۰۳/۲۸
این ویژگی usemap رو اولین باره میبینم! تو هیچ آموزش دیگه ای از html حداقل من ندیده بودم! خیــــــلی ممنون :)
نویسنده: nima
۱۴:۱۳ ۱۳۹۲/۰۵/۱۰
مطالبتون عالیه
واقعا ممنون
نویسنده: sh
۱۷:۳۵ ۱۳۹۲/۰۵/۱۱
فرض کنید بخوایم یه textfield در پس یه تصویر بذاریم و به این ترتیب یه طرح گرافیکی از فرم لاگین داشته باشیم، چطور میشه این کار رو کرد؟
پاسخ: 
احتمالا منظور شما قرار دادن یک تصویر در پس زمینه فیلد است، در این صورت باید از CSS برای تنظیم استایل عناصر HTML استفاده کنید که خود مبحث جداگانه دارد.
نویسنده: حمید
۲۰:۵۱ ۱۳۹۲/۰۷/۲۲
سلام
ایا میشه نقشه ی تصویری map رو روی عکس بکگراند اجرا کرد یا اینکه این صفت رو به عکس هایی که از css وارد میشن وارد کرد
پاسخ: 
خیر، این امکان تنها بر روی تگ img قابل اعمال است، در سایر موارد باید از تکنیک های CSS استفاده کنید که خود مبحث جداگانه دارد.
نویسنده: حمید
۰۰:۵۸ ۱۳۹۲/۰۷/۲۴
دستون درد نکنه فقط یه سوال چطور میشه عکسی رو که یه عنوان بکگراند تصویر قرار دادیم با مانیتور بیننده ست کنیم مثلا اندازه ی عکس به اندازه ی مانیتور بیننده تغییر کنه
پاسخ: 
انجام این کار به صورتی که می خواهید به سادگی امکانپذیر نیست، یعنی نمی توانید تصویر را با توجه به اندازه مانیتور کوچک و بزرگ کنید (مگر اینکه از کدهای جاوا اسکریپت و... استفاده کنید که روش قابل اطمینان و صددرصدی نیست)، به همین خاطر در طراحی حرفه ای معمولا یک تصویر با اندازه استاندارد (متناسب با عرض مانیتورهای فعلی) انتخاب و حاشیه های آن با رنگ پس زمینه همپوشانی می شود.
نویسنده: پیمان
۱۳:۴۱ ۱۳۹۲/۰۷/۲۶
اقا و خانم نمیدونم کلیه نویسندگان واقعا دستتون درد نکنه خیلی استفاده میکنم خیلی دوست دارم واقعا عالی.
نویسنده: amir
۱۴:۲۱ ۱۳۹۲/۰۷/۲۸
سلام بنده میخوام یه عکسی رو وسط صفحه وبم قرار بدم مثل لوگو گوگل، از چه عنصری باید استفاده کنم؟
پاسخ: 
برای اینکه محتوا در وسط قرار بگیرند از تگ زیر در HTML استفاده کنید:
<center>محتوا</center>
یا اگر با CSS آشنایی دارید از این خاصیت استفاده کنید:
<div style="text-align:center;">محتوا</div>
همچنین برای img خاصیت align به صورت خطی نیز قابل استفاده است (توصیه نمی شود).
نویسنده: محمد
۲۱:۲۴ ۱۳۹۲/۰۸/۰۸
سلام. خسته نباشید.
من همه مراحل رو رفتم همه هم درست. ولی تو قسمت map و برای rect هر کدوم از اون 4 تا عدد رو عوض می کنم باز فقط بالا سمت چپ قابل کلیک کردنه. دو تای اولی رو عدد دادم دو تای دوم صفر این طوری بود، دو تای دومی رو عدد دادم دو تای اول صفر باز هم بالا سمت چپ بود.
چرا؟
پاسخ: 
این خاصیت در عملکرد کمی حساس است و باید مقادیر را با آزمایش و خطا نسبت دهید! به طور مثال این حالت را تست کنید:
coords="40,40,194,194"
نویسنده: نینا
۱۰:۲۸ ۱۳۹۲/۰۸/۱۹
با سلام
وقتی عکس مثلا در درایو E قرار داره برای نمایش ان باید چکار کرد
پاسخ: 
در این حالت ابتدا باید تصویر را در یک سایت یا هاست آپلود و سپس از لینک آن در قسمت src استفاده نمائید.
۱۹:۳۶ ۱۳۹۲/۰۹/۰۱
سلام
از آموزشهاي خوبتون ممنونم. من هم اولين بار بود ويژگي usemap رو مي ديدم.
نویسنده: مبتدی
۱۷:۵۸ ۱۳۹۲/۰۹/۰۳
عالی بود خیلی بهم کمک کرد
نویسنده: نازیلا
۰۰:۰۱ ۱۳۹۲/۱۰/۰۷
ممنون از زحماتتون
نویسنده: رويا
۱۲:۴۴ ۱۳۹۲/۱۰/۰۷
سلام خسته نباشيد من دانشجوي كارشناسي نرم افزار هستم درس طراحي وب بايد وب سايت بسازم همه چيز رو ميدونم به غير از منو ساختن من با برنامه Dhtml منو ساختم و در صفحه homepage قرار دادم فقط براي قراردادن در صفحات ديگر وبم بايد چيكار كنم؟ آيا كد ايجاد شده رو در يكي يكي صفحات insert كنم يا از masterpage استفاده كنم؟ و سوال ديگرم براي لينك دادن به صفحات ديگم از همين منو بايد از تگ a استفاده كرد ؟ يا در خود برنامه dhtml لينك كنم؟ لطفا راهنماييم كنيد با تشكر
پاسخ: 
به نظر نیاز به مرور بیشتر مباحث مقدماتی دارید! منو برای نمایش صحیح نیاز به ارجاع صحیح به فایل های (JS, CSS ,تصاویر و...) دارد، مهم نیست در چه صفحه ای کدها درج می شوند، فقط باید آدرس به دایرکتوری فایل های منو صحیح تنظیم شود، لذا می توانید در همه صفحات از یک کد مشابه استفاده کنید، به شرطی که دایرکتوری آنها نیز یکی باشد، در غیر این صورت باید آدرس فایل ها را در سورس هر صفحه تنظیم کنید، در مورد سوال دوم نیز اگر از برنامه این کار را انجام دهید ساده تر خواهد بود، هر چند نتیجه نهیاتا به صورت کد تولید می شود و لذا به صورت دستی نیز قابل تنظیم است.
نویسنده: نیلوفر
۰۱:۲۷ ۱۳۹۲/۱۱/۰۶
سلام
من میخوام به جای بله و خیر، علامت های تیک سبز یا ضربدر قرمز بذارم. کد خاصی داره یا باید عکسشون رو بذارم. و از کجا عکس رو دانلود کنم.؟؟؟؟
ممنون. 
پاسخ: 
برای اینگونه موارد باید با CSS و خاصیت های مربوط به background آشنا باشید، عکس را از سایت های گرافیکی دانلود کنید!
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





3 × 1
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.