کار با تصاویر در HTML قسمت دوم
کار با تگ تصاویر در HTML
تگ picture در HTML
تگ picture در HTML چیست و چه کاربردی این تگ تصویر دارید؟ نحوه استفاده از تگ <picture> چگونه است؟ انعطافپذیری در این تگ به چه صورت است؟ در این مقاله به صورت کامل میخواهیم با تگ picture آشنا شویم، بنابراین پیشنهاد میکنم تا پایان این آموزش فرازنتورک را دنبال کنید.
1 تگ picture
- 1.1 خواص تگ <source>
تگ picture
تگ <picture> به توسعهدهندگان وب انعطاف بیشتری در به کارگیری منابع تصویری ارائه میدهد.
یکی از استفادههای رایج تگ <picture> در جهت دیزاین وبسایت برای طراحی واکنشگرا است.
به جای آن که یک تصویر برای اندازههای متفاوت تغییر مقیاس داده شود، میتوان از چند تصویر با اندازههای تعیین شده برای نمایش استفاده کرد.
تگ <picture> از دو تگ داخلی متفاوت استفاده می کند: اولی تگ <source> با امکان تکرار یک یا چند بار و دومی تگ <img> با امکان تکرار یک بار.
خواص تگ <source>
- خاصیت srcset: این خاصیت اجباری است و تعیین کننده آدرس URL تصویر برای نمایش.
- خاصیت media: هر نوع کوئری معتبری که در CSS تعریف شود را قبول میکند.
- خاصیت sizes: امکان تعریف یک توصیفگر پهنای تصویر (width)، یک کوئری مدیا به همراه توصیفگر پهنا و یا لیستی از کوئری های مدیا به همراه توصیفگر پهنای تصویر که با کاما از یک دیگر جدا شدهاند.
- خاصیت type: یک نوع MIMEرا مشخص میکند.
مرورگر از مقدارهای خواص بالا استفاده میکند تا بهترین تصویر را به نسبت اندازه بارگیری کند.
در این حالت مرورگر اولین تگ سورسی که همخوانی داشته باشد را انتخاب و بقیه را رد میکند.
تگ <img> در انتهای تگ picture به عنوان آخرین تگ لازم است قرار داده شود. وظیفه تگ <img> پشتیبانی از مرورگرهایی است که قابلیت پشتیبانی از تگ picture را ندارند و یا هیچ تگ <source> تعیین (و یا همخوانی ندارد) نشده است.
تگ <picture> مانند تگ های <video> و <audio> عمل میکند. شما سورسهای متفاوتی در داخل آن تعیین می کنید، که اولین سورسی که با اولویتها همخوانی داشته باشد توسط مرورگر انتخاب میشود.
تگ picture در نسخه HTML5 ارائه شده است. این تگ خواص و رویدادهای گلوبال HTML را پشتیبانی میکند.
کار با تصاویر در HTML
همچنین شما میتوانید اطلاعات بیشتری در رابطه با تگ <img> در مقاله مربوط به آشنایی با تگ <img> پیدا کنید.
<picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
در نمونه بالا، ۳ تصویر برای سایز های مختلف انتخابشده است که با تغییر سایز صفحه این تصاویر نیز تغییر میکنند و جایگزین تصاویر در دیگر سایزها میشوند. توضیح این کد به شرح زیر است:
- در سایزهای بزرگتر یا برابر ۶۵۰ پیکسل یک تصویر گل را مشاهده میکنید.
- درسایزهای کمتر از ۶۵۰ پیکسل و بزرگتر یا برابر ۴۶۵ پیکسل تصویر گل را مشاهده میکنید.
- در سایزهای کمتر از ۴۶۵ پیکسل نیز شما تصویر Clip Art گل را مشاهده میکنید.
برای معرفی شماره ۱ و ۲ از طریق تگ <source> استفاده میکنیم و حداقل سایز را با استفاده از خاصیت media مشخص میکنیم.
برای مورد ۳ نیز میبایست از تگ <img> استفاده کنیم و تصویر مورد نظرمان را وارد کنیم.
کار با تصاویر در HTML
کار با تگ Map در HTML
تگ map درHTML چیست و چه کاربردی دارد؟ برای مسیردهی به قسمتی از تصویر در HTMLباید از چه روشی استفاده کنیم؟ در این مقاله از سری آموزش های HTML با تگ map آشنا میشویم.
- 1 تگ Map در HTML
- 1.1 خاصیتهای تگ Map :
- 1.2 تفاوت این تگ در نسخههای HTML 4.01 و HTML5
- 1.3 تفاوت این تگ در HTML و XHTML
- 2 تگ داخلی <area> و خصوصیات آن
- 2.1 خصوصیت Shape و Coords
- 3 ابزاری برای ساخت Image Map
- 3.1 مراحل کار با ابزار:
تگ Map در HTML
برای تعریف یک نقشه بر روی تصویر باید از تگ <map> استفاده شود. نقشه تصاویر یا image-map در واقع محیطهای قابل کلیکی بر روی تصاویر هستند که در سمت کاربر پیاده شدهاند.
تگ <map> از یک خاصیت Name پشتیبانی میکند که مقدار آن در تگ <img> با خاصیت usemap تعریف میشود.
خاصیتهای تگ Map :
| خاصیت | مقدار | توضیح |
| Name | نام مپ | استفاده اجباری. نام نقشه تصویر را تعیین می کند |
تگ map شامل تعداد مشخصی تگهای داخلی <area> است که محیط های قابل کلیک برروی تصویر را تعیین میکنند.
تفاوت این تگ در نسخههای HTML 4.01 و HTML5
در HTML5 اگر از خاصیت id استفاده شود، مقدار آن میبایست با خاصیت name در تگ map معرفی شود.
تفاوت این تگ در HTML و XHTML
درHTML، خاصیت name منقضی شده است و به زودی حذف خواهد شد. به جای آن از خاصیت id استفاده کنید.
تگ <map> از رویداد ها (Events) نیز پشتیبانی می کند.
مثال:
تگ داخلی <area> و خصوصیات آن
همانطور که در مثال مشاهده میکنید، برای مشخص کردن محل مورد نظرمان در تصاویر میبایست از تگ داخلی <area> استفاده کنیم که خود این تگ خصوصیات مخصوص خود را دارد. در جدول زیر خصوصیات تگ داخلی <area> را مورد بررسی قرار میدهیم و سپس توضیحاتی را در رابطه با این خصوصیات ارائه میکنیم.
| خاصیت | مقدار | توضیحات |
| alt | متن | اگر از خاصیت href استفاده کرده باشید، میتوانید یک عنوان برای نمایش هنگامی که کاربر در محدوده موس را نگه داشته است. |
| coords | مختصات | محدوده مورد نظرمان را مشخص میکند. |
| download | نام فایل | لینکی است که کاربر با کلیک بر روی آن میتواند فایل لینک شده را دانلود کند. |
| href | لینک | یک لینک را در مختصات مشخص شده تعریف میکند. |
| hreflang | کد زبان | زبان لینک را مشخص میکند. |
| media | Media Query | مشخص میکند که لینک وارد شده برای چه رسانه یا دستگاهی بهینه است. (برای ریسپانسیو کردن صفحات وب مورد استفاده قرار میگیرد.) |
| nohref | مقدار | در HTML5 پشتیبانی نمیشود.
فعال بودن یا غیر فعال بودن لینکها را مشخص میکند. True به معنای فعال بودن. False به معنای غیر فعال بودن. |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
ارتباط بین لینک href و صفحه را مشخص میکند. |
| shape | default rect circle poly |
شکل تصویر برای مختصات را مشخص میکند. |
| target | _blank _parent _self _top framename |
هدف لینک href را مشخص میکند. |
| type | نوع رسانه | نوع رسانه را مشخص میکند. |
خصوصیت Shape و Coords
خصوصیت shape شکل مکانی مورد نظرمان در تصویر را مشخص میکند و انواع مختلفی دارد؛ همچنین خصوصیت coords نیز پس از مشخص شدن نوع shape مختصات محدوده مورد نظرمان را مقدار دهی میکند و مشخص میکند.
شکل rect یا مربع/مستطیل: با مقدار x1 و y1 برای مشخص کردن مختصات بالا چپ و با مقدار x2 و y2 برای مشخص کردن مختصات پایین راست معرفی میشود.
برای مثال در تصویر زیر نوع shape از نوع rect مشخص شده است و محدوده نیز با استفاده از Coords به ترتیب مشخص شده است. (coords=left,top,right,bottom – croods=x1,y1,x2,y2)
نمونه کد:
<img usemap="#butterfly" src="image.jpg"> <map name="butterfly"> <area shape="square" coords="0,0,60,60" href="test1.html"> <area shape="square" coords="80,80,200,150" href="test2.html"> </map>
شکل circle یا دایره: برای مشخص کردن مختصات به صورت دایرهای از طریق ۳ متغیر طول – عرض و شعاع (x,y,r) اقدام میکنیم.
متغیر x و y محل دقیق مرکز دایره را مشخص میکنند و متغیر r نیز شعاع دایره را مشخص میکند. بنابراین پس از مشخص کردن متغیر ها ما دایرهای به شعاع r و به مرکزیت x و y خواهیم داشت.
در زیر نمونهای از شکل Circle را مشاهده میکنید که درون تصویر محل مورد نظرمان به صورت دایرهای مشخص شده است. (coords=height,width,radius – coords=x,y,r)
نمونه کد:
<img usemap="#butterfly" src="image.jpg"> <map name="butterfly"> <area shape="circle" coords="30,30,10" href="test1.html"> <area shape="circle" coords="80,80,40" href="test2.html"> </map>
شکل Poly یا چند ضلعی: این شکل با مشخص کردن ناحیه های مختلف از تصویر با استفاده از طول و عرض های مختلف یک چند ضلعی ایجاد میکند که میتوانید مکانهای مختلفی از تصویر را انتخاب کنید. شما از طریق شکل polygon یا چندضلعی میتوانید بینهایت ناحیه مختصاتی را در تصویرتان مشخص کنید.
برای مشخص کردن مختصاتهای مورد نظر به صورت x1,y1 سپس x2,y2 الی آخر به ترتیب مختصاتها را وارد میکنیم. (coords=x1,y1,x2,y2,x3,y3,…,xn,yn)
نمونه کد:
<img usemap="#butterfly" src="image.jpg"> <map name="butterfly"> <area shape="poly" coords="100,0,150,60,10,40" href="test1.html"> </map> کار با تصاویر در HTML
ابزاری برای ساخت Image Map
وب سایتهای مختلفی برای ساخت image map وجود دارد که به شما کمک میکند مختصات دقیق نقاط مورد نظرتان را در تصویر را پیدا کنید.
یکی از این ابزارها یا وبسایتها، وب سایت Image-map.net میباشد که با این ابزار میتوانید با استفاده از shape های مختلف یک image map دقیق بسازید و مقادیر مورد نظرتان را به آن معرفی کنید.
در این مقاله کار با تصاویر در HTML وتگ map و تگ <picture> وخصوصیات آن آشنا شدیم و متوجه شدیم که میتوانیم قسمتهایی از یک تصویر را قابل کلیک کنیم تا اتفاقاتی خاص بر روی آن قسمتها رخ دهد. همچنین با تگ area که یک تگ داخلی نسبت به تگ map میباشد و با خصوصیات این تگ نیز که اصلیترین کار را در مسیریابی تصاویر انجام میدهد، آشنا شدیم.
همچنین با یک ابزار برای تولید Image Map خیلی دقیق و راحت آشنا شدیم که از آن میتوانید به صورت رایگان استفاده کنید و کدهایی با تگ map و area دریافت کنید.
امیدوارم این مقاله براتون مفید بوده باشه و آموزشهای بعدی ما رو هم دنبال کنید
مطالب مرتبط :
1-کار با تصاویر در HTML قسمت اول
2-کار با لیست ها در HTML قسمت اول
