جلسه 8 آموزش HTML: کار با تصاویر در html

سلام رفیق! 😊 به جلسه هشتم آموزش HTML از سایت رایا وردپرس خوش اومدی! 🌟

همونطور که می‌دونی، تصاویر یکی از بخش‌های مهم و ضروری هر وبسایت خوب هستن. این تصاویر نه تنها باعث جذاب‌تر شدن و زیباتر دیده شدن سایت می‌شن، بلکه به کاربر کمک می‌کنن تا اطلاعات و محتوای صفحه رو راحت‌تر و بهتر درک کنه. تو این جلسه قراره بهت یاد بدم چطور با تصاویر در HTML کار کنی. پس این آموزش رو از دست نده و تا آخر این پست منو با نگاه قشنگت همراهی کن 🙂

📌 چرا استفاده از تصاویر در صفحه وب مهمه؟

فکر کن داری یه وبسایت یا صفحه وب رو بدون هیچ تصویری می‌بینی – خسته‌کننده‌ست، نه؟ تصاویر مثل نگین‌های درخشان تو صفحه وب هستن! 🌟 اون‌ها می‌تونن:

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

• تصاویر می‌تونن محتوات رو جذاب‌تر و گیراتر نشون بدن.
• پیام‌هات رو به شکلی قوی‌تر و بدون نیاز به کلمه منتقل کنن.
• توضیحات پیچیده رو ساده‌تر و شفاف‌تر بیان کنن.
• تجربه کاربری بهتری برای بازدیدکننده‌ها ایجاد کنن.

تصاویر مثل داستان‌گویی بدون کلمات عمل می‌کنن 📖 و به راحتی توجه کاربر رو جلب می‌کنن 👀.

🛠️ چطوری تصویر رو تو HTML اضافه کنیم؟

برای اینکه بتونی تصویر رو به صفحه‌ات اضافه کنی، باید از تگ <img> استفاده کنی. 📸 این تگ یه تگ خودبسته است، یعنی نیازی به تگ پایانی برای بستن نداره. 🛠️ خیلی راحت و بدون پیچیدگی، می‌تونی تصاویر رو به صفحه اضافه کنی. یک مثال ساده ببینیم تا بهتر متوجه بشی:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در کد بالا باید به جای URL آدرس اینترنتی عکس مدنظرت رو قرار بدی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

توجه داشته باش که لازم نیست فقط از فرمت JPG استفاده کنی! 📸 می‌تونی از فرمت‌های مختلف دیگه مثل GIF، PNG، WEBP و … هم استفاده کنی. 🎨 فقط کافیه آدرس دقیق و درست فایل رو به جای URL در کد بالا قرار بدی. 🌐

آشنایی با صفت های مهم تگ <img> 📸

در تگ <img>, چند صفت مهم داریم که بهت کمک می‌کنن تصاویر رو به درستی نمایش بدی:

1. src: مشخص می‌کنه تصویر از کجا باید بارگذاری بشه (آدرس فایل تصویر).
2. alt: متن جایگزین تصویر که وقتی تصویر لود نشه نمایش داده می‌شه.
3. width: عرض تصویر رو مشخص می‌کنه. (مثلاً 300px)
4. height: ارتفاع تصویر رو مشخص می‌کنه. (مثلاً 200px)
5. title: نمایش یک توضیح کوتاه و اضافی وقتی که موس روی تصویر میره.
6. loading: مشخص می‌کنه که تصویر به صورت lazy loading (بارگذاری کسری) لود بشه یا نه. می‌تونه مقدارهایی مثل “lazy” یا “eager” داشته باشه.
7. srcset: استفاده از تصاویر با وضوح مختلف برای اندازه‌های مختلف صفحه و دستگاه‌ها (برای ریسپانسیو بودن).
8. sizes: مشخص می‌کنه که تصویر باید چطور اندازه‌گذاری بشه با توجه به ابعاد مختلف صفحه.
9. usemap: تبدیل تصویر به یک نقشه تصویری (Image map) برای ایجاد لینک بر روی نقاط مختلف تصویر.
10. crossorigin: تنظیم نحوه بارگذاری تصویر از منابع خارجی و مدیریت درخواست‌های CORS.

صفت src

• src (Source): این صفت همونطور که قبل‌تر گفتیم، آدرس دقیق تصویر رو مشخص می‌کنه. 🗺️ وقتی می‌خوای تصویر رو از جایی مثل سرور خودت یا یک URL خارجی بارگذاری کنی، باید این آدرس رو درون src قرار بدی.مثال:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

صفت alt

• alt (Alternative Text): این صفت برای نمایش متن جایگزین تصویر استفاده میشه. وقتی تصویر بارگذاری نشه یا کاربر نتونه تصویر رو ببینه، متن alt به‌جای اون نمایش داده میشه. این ویژگی برای سئو هم خیلی مهمه! 🔍 همینطور برای افراد کم‌بینا که از صفحه‌خوان استفاده می‌کنن، متن alt به وضوح محتوای تصویر رو توضیح میده.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

توجه! صفت alt بیشتر برای بحث سئو مهمه و پیشنهاد میشه حتما برای همه تصاویر سایتت از این صفت استفاده کنی تا سایتت تو نتایج جستجو بهتر دیده بشه. 🔍

این متن یا توضیحی که تو صفت alt می‌ذاری نباید خیلی طولانی باشه، چون هدف اینه که به کاربر یه توضیح سریع و مفید بدی. ✨ مثلاً اگه عکسی از یه کافه داری، می‌تونی داخل alt بنویسی: “کافه دنج با دکور جذاب”. ☕️📸 اینطوری هم تصویر رو به خوبی توضیح دادی و هم متن جایگزین مفیدی دادی که برای سئو هم خوبه! 🚀

یه نکته حاشیه ای و آخر هم بهت بگم برای سئو بهتر تصاویر: توی توضیحات alt حتما از کلمه کلیدی مقاله‌ات هم استفاده کن. مثلا اگه من یه مقاله نوشتم با موضوع “معرفی کافه دنج”، بهتره تو alt تصاویرم از کلمه کلیدی “کافه دنج” استفاده کنم تا نمره سئو بهتری کسب کنم. 💡

صفت width

width مشخص می‌کنه که عرض تصویر باید چقدر باشه. این صفت بهت این امکان رو می‌ده که تصویر رو به اندازه دلخواه خودت در بیاری تا متناسب با طراحی سایتت باشه. 🖼️

مثال:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال، عرض تصویر ۴۰۰ پیکسل تنظیم شده.

نکته! ⚡ عددی که به width می‌دی به صورت پیش‌فرض بر حسب پیکسل (px) محاسبه میشه. ولی نکته جالب اینجاست که می‌تونی از واحدهای دیگه هم مثل درصد (%) یا حتی واحدهای ریسپانسیو مثل vw و em استفاده کنی. 🌟 اینطوری می‌تونی تصویر رو به دلخواه خودت تنظیم کنی و طراحی ریسپانسیو‌تری داشته باشی! 📱💻

نکته‌ی تکمیلی: اگر فقط width رو برای تصویرت تنظیم کنی و height رو فراموش کنی، تصویر ممکنه به درستی نمایش داده نشه و تناسبش بهم بخوره. بنابراین، بهتره که از هر دو صفت (عرض و ارتفاع) برای حفظ تناسب تصویر استفاده کنی. ⚖️

صفت height

height هم عملکردش برای تنظیم ابعاد تصویره درست مثل صفت width . این صفت بهت این امکان رو می‌ده که ارتفاع تصویر رو تنظیم کنی. این صفت می‌تونه به صورت پیکسل (px) یا درصد (%) تنظیم بشه و بهت کمک می‌کنه که تصویر رو به اندازه دلخواهت در صفحه وب نشون بدی. 🖼️

مثال:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال، ارتفاع تصویر 50 درصد تصویر والد (اصلی ) تنظیم شده.

اگه بخوایم همزمان از صفت‌های height و width استفاده کنیم، مثالمون این‌طوری میشه: 📏

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در مثال بالا عرض تصویر 500 و طولش 300 در نظر گرفته شده که به صورت پیش فرض واحد پیکسل در نظر گرفته میشه برای این اعداد و نیازی به نوشتن واحد برای پیکسل نیست .

صفت title

صفت title بهت این امکان رو می‌ده که یک توضیح کوتاه یا عنوان برای تصویر مشخص کنی. وقتی کاربر موس رو روی تصویر می‌بره، این متن به صورت یک پاپ‌آپ یا توضیح اضافی نمایش داده میشه. 🖱️✨

title برای ارائه اطلاعات بیشتر در مورد تصویر استفاده میشه. مثلاً ممکنه بخوای یک توضیح کوتاه درباره محتوای تصویر بدی یا اطلاعات اضافی درباره اون رو به کاربر نمایش بدی.

تفاوت title با alt: متن alt برای زمانی که تصویر لود نشه یا برای سئو استفاده میشه، ولی title بیشتر برای نمایش توضیحات اضافی وقتی کاربر موس رو روی تصویر میاره کاربرد داره. که بیشتر برای بحث UI و ارائه اطلاعات اضافی به کاربر مهمه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

صفت loading

صفت loading برای کنترل نحوه بارگذاری تصاویر استفاده میشه. این صفت بهت کمک می‌کنه تا تصاویر رو به صورت تنبل (lazy loading) یا عادی بارگذاری کنی. این کار می‌تونه سرعت بارگذاری صفحه رو بهتر کنه و تجربه کاربری بهتری ارائه بده. 🚀

• lazy loading: وقتی از مقدار lazy برای loading استفاده می‌کنی، تصویر تنها زمانی بارگذاری میشه که کاربر به اون قسمت از صفحه اسکرول کنه. این کار باعث میشه که تصاویر اضافی در ابتدا بارگذاری نشن و سرعت بارگذاری صفحه بهتر بشه. 📉

مثال:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• eager loading: وقتی از مقدار eager برای loading استفاده می‌کنی، تصویر به طور معمولی و فوراً بارگذاری میشه. این حالت برای تصاویری که باید سریعاً نمایش داده بشن، مناسبه. ⚡

مثال:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در اینجا تصویر فوراً بارگذاری میشه، حتی اگر کاربر هنوز به آن بخش از صفحه نرفته باشه.

چرا استفاده از loading مهمه؟

• افزایش سرعت بارگذاری: استفاده از lazy loading به کاهش زمان بارگذاری صفحه کمک می‌کنه، به خصوص اگر سایت دارای تصاویر زیادی باشه. ⏱️
• بهبود تجربه کاربری: این ویژگی باعث میشه که کاربر سریع‌تر به محتوای اصلی دسترسی پیدا کنه و زمان انتظار برای بارگذاری صفحات کاهش پیدا کنه. 👍

صفت srcset

صفت srcset بهت این امکان رو می‌ده که برای هر دستگاه و اندازه صفحه نمایش، چندین نسخه از یک تصویر با اندازه‌های مختلف (حالت 1) و وضوح‌ مختلف (حالت 2) بارگذاری کنی. این کار باعث میشه که تصویر همیشه با بهترین کیفیت و متناسب با ویژگی‌های دستگاه، نمایش داده بشه و تجربه کاربری بهتر بشه. 🌟

مثال (حالت اول: تعیین چندین نسخه از تصویر برای نمایش)

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

یک نکته مهم برای استفاده بهتر از srcset وجود داره: بهتره از صفت sizes هم در کنار صفت srcset استفاده کنی تا مشخص کنی کدوم نسخه از تصویر باید در شرایط مختلف بارگذاری بشه. در غیر این صورت، مرورگر ممکنه نتونه به درستی تصمیم بگیره که کدوم تصویر رو انتخاب کنه. 🤔

در مثال بالا، صفت srcset سه نسخه از تصویر رو با عرض‌های مختلف مشخص کرده، در حالی که sizes به مرورگر میگه برای اندازه‌های مختلف صفحه نمایش کدام تصویر مناسب‌تره و همون نمایش داده بشه. 📐

مثال (حالت دوم: پشتیبانی از انواع وضوح برای تصویر)

وقتی از srcset استفاده می‌کنی، می‌تونی تعیین کنی که برای دستگاه‌های با صفحه نمایش کوچیک‌تر، تصویر با وضوح پایین‌تر بارگذاری بشه و برای دستگاه‌های با صفحه نمایش بزرگ‌تر، تصویر با وضوح بالاتر نمایش داده بشه. این کار علاوه بر اینکه تجربه کاربری رو بهتر می‌کنه، باعث صرفه‌جویی در مصرف پهنای باند هم میشه. 🌐📱

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در اینجا، برای دستگاه‌هایی با وضوح صفحه نمایش مختلف (مثل نمایشگرهای رتینا یا 4K)، نسخه‌های مختلف تصویر بارگذاری میشه. برای دستگاه‌های معمولی، تصویر با وضوح 1x بارگذاری میشه. برای دستگاه‌هایی با وضوح دو برابر مثل نمایشگرهای Retina، تصویر 2x بارگذاری میشه و برای دستگاه‌های با وضوح سه برابر مثل نمایشگرهای 4K، تصویر 3x نمایش داده میشه. این کار کمک می‌کنه که تصاویر بهینه‌سازی شده و متناسب با کیفیت صفحه نمایش بارگذاری بشه.

صفت sizes

در قسمت‌های قبلی یه اشاره کوچیکی به صفت sizes کردیم، اما حالا می‌خواهم بیشتر راجع بهش توضیح بدم. صفت sizes به مرورگر میگه که برای اندازه‌های مختلف صفحه نمایش، باید چه اندازه‌ای از تصویر رو بارگذاری کنه. این کار به مرورگر کمک می‌کنه که تصویر مناسب‌تری رو انتخاب کنه و از بارگذاری تصاویر بزرگتر یا کوچک‌تر از نیاز جلوگیری کنه. 😎

به طور کلی، این صفت به مرورگر می‌گه که چه اندازه‌ای از تصویر برای نمایش در صفحه با توجه به عرض صفحه نیاز هست. این باعث میشه که تصاویر سریع‌تر بارگذاری بشن و در مصرف پهنای باند هم صرفه‌جویی بشه. 🌐⚡

مثال:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال، صفت sizes به مرورگر می‌گه که برای دستگاه‌هایی با عرض صفحه کمتر از 600px، از تصویر با عرض 500px استفاده کن، برای دستگاه‌هایی با عرض صفحه کمتر از 1200px از تصویر 1000px استفاده کن، و در نهایت برای دستگاه‌هایی با عرض بیشتر از 1200px از تصویر 1500px استفاده کن.

با این روش، مرورگر بهترین و مناسب‌ترین تصویر رو بارگذاری می‌کنه که باعث بهبود سرعت لود صفحه و تجربه کاربری بهتر میشه. 🌟📱

صفت usemap

صفت usemap بهت این امکان رو می‌ده که یک تصویر رو به یک نقشه تصویری (image map) تبدیل کنی. این یعنی می‌تونی روی بخش‌های مختلف تصویر لینک‌هایی قرار بدی تا وقتی کاربر روی اون قسمت‌ها کلیک می‌کنه، به صفحه‌های دیگه بره. خیلی جالبه که می‌تونی هر بخش از تصویر رو مثل دکمه‌ها یا لینک‌ها فعال کنی! 🎯

به طور ساده‌تر، این صفت کمک می‌کنه که یه تصویر رو به قسمت‌های مختلف تقسیم کنی و هر قسمت رو به یک لینک خاص وصل کنی. این کار می‌تونه تجربه کاربری رو خیلی جذاب‌تر کنه.

مثال: فرض کن یه نقشه داریم که می‌خوای برای هر منطقه لینک بذاری:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال، تصویر map.jpg به یک نقشه تصویری تبدیل شده. وقتی روی بخش‌های مختلف تصویر مثل تهران، اصفهان یا شیراز کلیک کنی، به صفحات مخصوص اون مناطق می‌ری.

برای ساخت نقشه تصویری، مراحل رو گام به گام میگم تا بهتر متوجه بشی:

• ایجاد تصویر 📸: اول از همه باید یه تصویر داشته باشی که تا به نقشه تصویری تبدیل کنی. مثلاً این تصویر می‌تونه یه نقشه جغرافیایی یا هر تصویری با بخش‌های مختلف باشه که می‌خواهی روی هر قسمت لینک بذاری.

• استفاده از صفت usemap 🔗: حالا تو تگ <img> از صفت usemap استفاده کن و به مرورگر بگو که این تصویر به یک نقشه تصویری تبدیل بشه. این صفت باید به #map اشاره کنه (که بعداً در تگ <map> تعریف می‌کنیم).

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• ساخت نقشه با <map> 🗺️: در این مرحله باید یه تگ <map> تعریف کنی که توش بخش‌های مختلف تصویر رو تعریف کنی. برای هر بخش از تصویر از تگ <area> استفاده می‌کنیم که مشخص می‌کنه این بخش کدوم قسمت از تصویر رو دربر می‌گیره و به کجا لینک می‌ده.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

خوبه بدونی: تگ <area> در نقشه‌های تصویری سه نوع شکل هندسی برای تعریف نواحی کلیک‌پذیر ارائه میده که با استفاده از هرکدوم می‌تونی ناحیه‌ای از تصویر رو مشخص کنی که کاربر روش کلیک کنه:

rect (مستطیلی)📏 : با استفاده از این صفت می‌تونی یک مستطیل روی تصویر رسم کنی. برای مشخص کردن این مستطیل باید مختصات گوشه‌های بالا-چپ و پایین-راست رو به صورت دو نقطه (x1, y1) و (x2, y2) در صفت coords وارد کنی:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال، مستطیل از نقطه (34, 44) شروع میشه و تا (270, 350) ادامه پیدا می‌کنه.

circle (دایره‌ای) 🔵: اگر بخوای یک دایره روی تصویر تعریف کنی، از circle استفاده کن. باید شعاع دایره و مرکز دایره رو با دو مقدار (x, y) در صفت coords مشخص کنی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در اینجا، دایره با مرکز در نقطه (500, 500) و شعاع 75 تعیین شده.

poly (چند ضلعی) 🔺: با poly می‌تونی هر شکلی با چند ضلع روی تصویر تعریف کنی. به جای دو نقطه یا شعاع، باید چندین نقطه به صورت لیست (x1, y1, x2, y2, …) رو در صفت coords وارد کنی تا یک چند ضلعی رسم بشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

در این مثال، چند ضلعی با سه نقطه مشخص شده و می‌تونی این نقطه‌ها رو تغییر بدی تا شکل دلخواه رو به دست بیاری.

پس در نهایت، با استفاده از rect، circle و poly می‌تونی نواحی مختلف روی تصویر رو به راحتی مشخص کنی و برای هر ناحیه لینک جداگانه‌ای قرار بدی. 🌍

• افزودن لینک به مناطق 🌍: در آخرین مرحله ساخت نقشه تصویری در هر <area> می‌تونی از صفت href استفاده کنی تا به صفحه‌ای خاص لینک بدی. برای مثال، اگر کاربر روی قسمت “تهران” کلیک کنه، به صفحه tehran.html می‌ره.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

نکته! می‌تونی از ابزارهای آنلاین هم برای ایجاد نقشه تصویری یا Image Maps استفاده کنی. این ابزارها بهت کمک می‌کنن تا به راحتی و بدون نیاز به کدنویسی پیچیده، نقاط قابل کلیک روی تصویر رو مشخص کنی. دو تا ابزار خوب برای این کار:

1. Image-Map.net: این ابزار آنلاین خیلی ساده‌ست و بهت این امکان رو می‌ده که تصاویر رو آپلود کنی و به راحتی نواحی قابل کلیک رو با استفاده از شکل‌های مختلف (مستطیل، دایره، چندضلعی) مشخص کنی.
2. GIMP: اگر می‌خوای بیشتر دستت تو طراحی باز باشه، GIMP یه ابزار خیلی خوبه که می‌تونی ازش برای ایجاد نقشه تصویری استفاده کنی و با قابلیت‌های بیشتر در طراحی، نتایج بهتری بگیری.

با استفاده از این ابزارها می‌تونی به راحتی نقشه‌های تصویری حرفه‌ای بسازی و ازشون تو سایتت استفاده کنی. 🎨📸

صفت crossorigin

صفت crossorigin بهت کمک می‌کنه که تصاویر رو از منابع خارجی (مثل سرورهای دیگه) بدون مشکل بارگذاری کنی. این صفت بیشتر وقتی استفاده میشه که بخوای از تصاویری که روی سایت‌های دیگه قرار دارن استفاده کنی، بدون اینکه مشکل امنیتی یا دسترسی به داده‌ها پیش بیاد.

چرا مهمه؟

بعضی وقتا وقتی تصویر رو از سایت دیگه بارگذاری می‌کنی، مرورگر نمی‌دونه چطور باید بهش دسترسی پیدا کنه. اینجاست که صفت crossorigin وارد عمل میشه و مشخص می‌کنه که چطور باید با اون تصویر ارتباط برقرار کنه.

مقادیر crossorigin:

• anonymous : یعنی درخواست تصویر بدون ارسال اطلاعات هویتی (مثل کوکی‌ها) به سرور انجام بشه. این برای زمانی که به اطلاعات حساس نیاز نداری خیلی مفیده.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

• use-credentials : یعنی درخواست تصویر با اطلاعات هویتی (کوکی‌ها) ارسال بشه. این زمانی مفیده که بخوای به تصاویری که نیاز به دسترسی به حساب کاربری یا اطلاعات حساس دارن، دسترسی پیدا کنی.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

نحوه ایجاد تصویر لینک دار 🔗

ایجاد تصویر لینک‌دار خیلی ساده‌ست! این یعنی وقتی کاربر روی تصویر کلیک می‌کنه، به یک صفحه دیگه هدایت میشه. برای این کار از تگ <a> برای لینک و تگ <img> برای تصویر استفاده می‌کنیم.

مراحل انجام کار:

1. اول باید با استفاده از تگ <a> یه لینک ایجاد کنی که مقصد لینکت مشخص بشه.
2. داخل این لینک، تگ <img> رو قرار می‌دی که تصویر نمایش داده بشه.

مثال: فرض کن که می‌خوای یه تصویر از غروب آفتاب بذاری که وقتی روش کلیک میشه، به صفحه‌ای از سایتت هدایت بشه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

وقتی کاربر روی این تصویر کلیک کنه، به صفحه‌ای که در تگ <a> مشخص کردی هدایت میشه.

جمع بندی

حالا دیگه می‌دونی چطور:

• تصاویر رو در HTML اضافه کنی 🖼️
• اندازه‌شون رو تنظیم کنی 📏
• بهینه‌سازی‌شون کنی ⚡
• و از ویژگی‌های پیشرفته استفاده کنی 🔧

یادت باشه که تصاویر می‌تونن سرعت سایتت رو کم کنن، پس همیشه بهینه‌سازی‌شون کن و از اونها به درستی استفاده کن. 🚀

مرسی که تا پایان این جلسه همراه من بودی 🙏 ببخشید یکم مباحث طولانی تر شد، خسته نباشی 💪 فعلن تا جلسه بعد خوش بگذره و به زودی همو می‌بینیم! 😎