تصویر در HTML، تگ img و تگ map
خوش اومدین به چهارمین جلسه از دوره آموزش HTML. امروز قرار هست که تصویر رو به پروژه خودمون اضافه کنیم. برای انجام این کار از تگ img استفاده میکنیم و بعد از اون بعد از یادگیری لینک دهی به یه تصویر توی HTML به سراغ لینک دار کردن یه قسمت مشخص از تصویر میریم. پس با این جلسه از HTML همراه باشید.
تگ img در HTML
صفحات وب بدون تصویر، واقعا کسل کننده میشن. استفاده از تصاویر در صفحات وب نه تنها به زیبایی این صفحات کمک میکنه بلکه به انتقال مفاهیم هم کمک زیادی میکنه. ما برای قرار دادن یه تصویر داخل فایل HTML خودمون از تگ img استفاده میکنیم. این تگ، یه تگ یک قسمتی هست و دو تا صفت خیلی مهم داره. یه صفت برای مشخص کردن آدرس تصویر و دیگری برای متن جایگزین. تصویر زیر رو ببینید:
همینطور که توی تصویر بالا میبینید در خط هشتم من از تگ img استفاده کردم. مقدار صفت src رو برابر با picture.jpg قرار دادم به این علت که تصویر موردنظرم در کنار فایل index.html که در حال ویرایش اون هستم قرار داره (کادر قرمز رنگ را ببینید). ما با آدرس دهی های مطلق و نسبی تو جلسه قبلی آشنا شدیم. src نیز دقیقا از این دو نوع آدرس دهی پشتیبانی میکنه. اما این تگ یه صفت مهم دیگه داره و اون alt هست. این صفت، یه متن رو قبول میکنه که بهش میگیم متن جایگزین. به این معنی که اگر به هر دلیلی تصویر ما روی صفحه لود نشه، این متن به صورت جایگزین روی صفحه وب قرار میگیره.تصویر زیر رو ببینید:
من در خط هشتم زمانی که صفت src رو مقداردهی میکردم، آدرس فایل picture1.jpg رو تایپ کردم. اگه به کادر قرمز رنگ نگاه کنید من چنین فایلی ندارم و فقط یک تصویر با نام picture.jpg اونجا هست. حالا اگه به خروجی نگاه کنیم میبینیم به همین دلیل که عکسی با نام picture1 در آدرس مدنظر من نبوده متن alt روی صفحه جایگزین تصویر شده. بنابراین هرگاه که مرورگر به هر دلیلی نتونه عکس ما رو بخونه از صفت alt تصویر استفاده میکنه. این صفت در SEO نیز بسیار مهم است.
لینک دار کردن تصویر در HTML
ما در جلسه سوم یادگرفتیم که چطور با استفاده از تگ a یک لینک ایجاد کنیم. در مثالهای اونجا ما از متن استفاده کردیم و با استفاده از تگ a ، متنهای خودمون رو لینک دار میکردیم. حالا که با تصاویر آشنا شدیم، میتونیم با ترکیب این دو تگ و قرار دادن تگ img داخل تگ a یک تصویر رو لینک دار کنیم. مثال زیر رو ببینید:
همینطور که توی تصویر بالا میبینید ما یه تگ a داریم که داخل اون از تگ img استفاده کردیم. به این ترتیب اگر کاربر در خروجی روی تصویر ما کلیک کنید به آدرس موردنظر ما که در صفت href تگ a قرار گرفته، هدایت میشه.
لینک دار کردن قسمتی از تصویر در HTML
ما تونستیم با قرار دادن تگ img داخل یک تگ a ، یک تصویر رو لینک دار کنیم. حالا اگه قصد داشته باشیم یه قسمت مشخصی از تصویر رو فقط بهش این امکان رو بدیم چطور؟ آیا این امکان در HTML وجود داره که من بتونم فقط به یه قسمتی از تصویرم امکان لینک شدن رو بدم؟ پاسخ مثبت هست. ما میتونیم با استفاده از تگ map این کار رو انجام بدیم.
تگ map در HTML
تگ map هست که میتونیم در کنار تگ img ازش استفاده کنیم و مشخص کنیم که هر بخش از تصویر به یه آدرس مجزایی لینک بشه. من تو مثال زیر سه قسمت از تصویر رو به سه آدرس متفاوت لینک دادم. لپ تاپ، موبایل و فنجان قهوه هر کدام به یه لینک جداگانه لینک میدن و اگه کاربر روی هرکدوم از اونها کلیک کنه به آدرس مشخص هرکدوم میره. کد رو ببینید تا توضیح بدم که این تگ چطور کار میکنه
همونطور که میبینید در خط 8 من از تگ img استفاده کردم. اینجا یه صفت جدید رو میبینیم به اسم usemap که مقدار اون برابر است با workmap که ابتداش یه علامت # داره. این علامت # ثابت هست و مقدار بعد از # مقدار صفت name از تگ map هست که اینجا قرار گرفته. به خط 10 نگاه کنید. تگ map که یه تگ دو قسمتی هست دارای یه صفت بنام name است و مقدار workmap که ما از اون در مقداردهی صفت usermap تگ img استفاده کرده بودیم، به تگ name این تگ اختصاص داده شده.
ما ممکن هست چندین تگ img در فایل خودمون داشته باشیم. برای اینکه تگ map خودمون رو به تصویر موردنظرمون متصل کنیم از این دو صفت usemap برای تگ img و name برای map استفاده میکنیم. # هم که گفتیم وجودش ضروریه.
حالا بریم سراغ خود تگ map
داخل تگ map یه تگ دیگه داریم که با استفاده از اون میتونیم قسمت یا قسمتهای مورد نظر خودمن رو از تصویر مشخص کنیم. این تگ تک قسمتی هست و area نام داره.
این تگ چهار تا خصوصیت داره که با دوتاشون آشنا هستیم. صفت href که مشخصه برای آدرس دهی هست و alt رو هم که باهاش آشنا شدیم. دو تا صفت دیگه داریم که در حقیقت قسمت موردنظر ما رو مشخص میکنن که در موردشون توضیح میدم. فقط یادآوری میکنم چون من میخواستم به سه قسمت از تصویرم 3 تا لینک جداگونه بدم از 3 تا تگ area داخل map استفاده کردم. ما با هر تگ area میتونیم یه بخش از تصویر رو جدا کنیم.
حالا دو تا صفت دیگه تگ area چکار میکنه؟
صفت shape از تگ area
صفت shape چهار تا مقدار رو قبول میکنه و ما میتونیم یکی از این چهار گزینه رو بسته بن نیازمون انتخاب کنیم:
rect – یک منطقه مستطیلی را تعریف می کند
circle – یک منطقه دایره ای را تعریف می کند
poly – یک منطقه چند ضلعی را تعریف می کند
default – کل منطقه را تعریف می کند
ما میتونیم بسته بن نیازمون از یکی از این چهار مقدار استفاده کنیم.
مثلا برای مشخص کردن محدوده لپ تاپ و موبایل چونکه مستطیل هستند از rect استفاده میکنیم و برای فنجان از circle . اگه شکلی داشتیم که غیر از اینها بود از poly استفاده میکنیم.
صفت coords از تگ area
اگه به تصویر بالا نگاه کنید میبینید که توی این قسمت یه سری عدد هست که با کاما از هم جدا شدن. حالا این اعداد چی هستن؟
این اعداد در حقیقت مختصات قسمتی هست که قراره انتخاب بشه که برای هر کدوم از چهار شکلی که توی صفت shape انتخاب میکنیم ترکیب متفاوتی داره.
نحوه ورود اطلاعات صفت coords زمانی که صفت shapre را برابر rect قرار دادیم.
خب از اونجایی که ما قراره یه مستطیل رو انتخاب کنیم کافی هست که مختصات دو تا گوشه این مستطیل رو داشته باشیم. بعد از اون به راحتی میتونیم محدوده اون مستطیل رو داشته باشیم.
همونطور که تو تصویر بالا دیدید برای صفت rect از 4 عدد استفاده شده. دو تا عدد اول x و y یک گوشه از مستطیل و دو تا عدد بعدی x و y یک گوشه دیگه مستطیل ما رو نشون میدن.
نحوه ورود اطلاعات صفت coords زمانی که صفت shapre را برابر circle قرار دادیم.
برای این حالت چون قرار هست یه دایره انتخاب کنیم نیاز به مشخص کردن مرکز دایره داریم که باز هم با استفاده از x و y نقطه مرکز دایره رو مشخص میکنیم (2 عدد اول) و عدد سومی که وارد میکنیم نشون دهنده اندازه شعاع دایره ماست.
نحوه ورود اطلاعات صفت coords زمانی که صفت shapre را برابر poly قرار دادیم.
برای شکل های دیگه باز هم از همین روش مختصات نقطه نقطه استفاده میکنیم. برای هر نقطه x و y رو به ترتیب پشت سرهم قرار میدیم و HTMl بصورت خودکار فضای بین این نقاط رو انتخاب میکنه.
پیدا کردن نقاط x و y و درست کردن مقدار نهایی coords
خب این دیگه خیلی سخت شد. از کجا این همه x و y رو پیدا کنیم؟
واقعا هم کار سختی هست. ولی ما که قرار نیست مثل انسانهای اولیه کار کنیم. سعی میکنیم از ابزارهایی که در اختیارمون هست استفاده کنیم و کارهارمون رو سریعتر و دقیقتر پیش ببریم.
برای انجام این کار من یه وبسایت معرفی میکنم که تمام مقادیر تگ های area و map رو درست میکنه.
نمونه های زیادی توی وب هست ولی شما میتونید با استفاده از این وبسایت به راحتی و با چند کلیک این تگ ها رو درست کنید و استفاده کنید. اگه دوست داری نحوه استفاده از وبسایت رو یاد بگیری توی ویدیوی این جلسه آموزشی کامل توضیح دادم.
