حسین همت یار
فصل سوم ( معرفی ساختار HTML4 )
جلسه هفتم (تصاویر در HTML )
سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان
در این جلسه راجع به تصاویر در HTML صحبت می کنیم . گاهی اوقات نیاز داریم که تصاویر متعددی رو به صفحات وب اضافه کنیم یا تصاویری رو به صفحات دیگه لینک بدیم و یا حتی روی قسمت های مختلف یک تصویر لینک های متعدد ایجاد کنیم . خوب همه ی این موارد رو تواین جلسه بررسی می کنیم .
درج تصویر در صفحه وب
با استفاده از عنصر <img> شما می تونید به راحتی هر تصویری که دلتون میخواد به صفحه ی وبتون اضافه کنید . دستور کلی این عنصر به شکل زیر هست :
|
۱ |
<img src="http://iranweblearn.com/picture.jpg" alt="توضیحی در رابطه با تصویر" title="توضیحی در رابطه با تصویر" width="۲۰۰" height="۲۰۰"> |
این عنصر ۴ خاصیت اصلی داره :
خاصیت src : اصلی ترین خاصیت این عنصر ، src هست که آدرس تصویر رو مشخص میکنیم .
خاصیت alt : خاصیت پرکاربرد و مهم این عنصر هست که توضیحاتی رو در رابطه با تصویر در این خاصیت قرار میدیم . زمانی که صفحه لود بشه اما تصویر با مشکل مواجه بشه و مشخص نباشه چه تصویری پشت صحنه هست ، توضیحات این خاصیت هست که کاربر و راهنمایی می کنه که چه تصویری در این مکان قرار داره . مثلا شما یک عکس از یک اسب داخل صفحه ی وبتون درج می کنید ، مقدار خاصیت alt رو با متن ” تصویر اسب ” پر می کنید . حالا اگر لود تصویر با مشکل مواجه بشه و کاربر اون تصویر رو نبینه ، نوشته ای رو میبینه با عنوان ” تصویر اسب ” و متوجه میشه این تصویری که لود نشده ، تصویر یک اسب هست .
خاصیت title : متن title زمانی به کاربر نمایش داده میشه ، که کاربر موس رو روی تصویر نگه داره ، همچنین مقدار این خاصیت تاثیر بسیار زیادی با سئوی تصاویر داره . تصاویر چون متن نیستن توی گوگل هم ایندکس نمیشن و توی نتایج جستجوها نمایش داده نمیشن . فقط در یک صورت این تصاویر در نتایج جستجو ظاهر میشن که دارای خاصیت title باشن .
خاصیت width : عرض تصویر رو مشخص میکنه .
خاصیت height : ارتفاع تصویر رو مشخص میکنه.
لینک کردن تصاویر در صفحه
برای لینک کردن تصاویر ، میتونید خیلی راحت از عنصر <a> استفاده کنید :
|
۱ |
<a href="http://iranweblearn.com"><img src="http://iranweblearn.com/picture.jpg" alt="توضیحی در رابطه با تصویر" ></a> |
لینک بخش های مختلف تصویر به صفحات دیگر
برای لینک کردن قسمت های مختلف یک تصویر ، باید از map و area استفاده کنیم . به کد زیر دقت کنید :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
<img src="computer.jpg" alt="اجزای یک کامپیوتر" width="۵۰۰" height="۵۰۰" border="۰" usemap="#Map" /> <map name="Map" id="Map"> <area shape="poly" coords="۹۷,۳۱۰,۱۰۳,۹۵,۳۲۷,۸۷,۳۱۴,۳۳۳,۳۱۴,۳۳۲,۲۰۸,۳۶۰" href="monitor.html" target="_blank" alt="مانیتور چیست؟" title="مانیتور چیست؟" /> <area shape="poly" coords="۲۲۰,۲۹۴" href="#" /><area shape="poly" coords="۴۹۱,۱۲۸,۳۵۳,۱۳۰,۳۵۱,۳۷۹,۴۱۷,۳۸۶,۴۸۵,۳۳۰" href="case.html" target="_blank" alt="کیس چیست؟" title="کیس چیست؟" /> <area shape="poly" coords="۳۴۸,۳۸۸,۳۰۶,۴۲۹,۵,۳۸۲,۷۴,۳۵۲" href="keyboard.html" target="_blank" alt="کیبرد چیست؟" title="کیبرد چیست؟" /> <area shape="poly" coords="۳۶۰,۴۲۵,۳۷۶,۴۲۶,۳۹۶,۴۱۶,۴۰۶,۴۰۷,۴۰۹,۳۹۴,۳۹۱,۳۸۶,۳۷۵,۳۸۶,۳۵۸,۳۸۷,۳۴۸,۳۹۹,۳۴۸,۴۱۰,۳۵۲,۴۱۸" href="mouse.html" target="_blank" alt="موس چیست؟" title="موس چیست؟" /> </map> |
ما یک تصویر تو صفحه قرار دادیم با خاصیت هایی که در ابتدای جلسه گفتم . تنها تفاوت این تصویر دارا بودن خاصیت usemap هست . اتصال بین عنصر <map> و عنصر <img> با خاصیت usemap و مقدار id عنصر map انجام میشه .
درون عنصر map عنصری به نام area وجود داره که محیط رو بر اساس مختصات انتخاب می کنه و به مقصد مورد نظر لینک می کنه ؛ دارای خاصیت های زیر هست :
Alt : متن جایگزین برای اون ناحیه رو مشخص می کنید .
Coords : مختصات ناحیه رو مشخص می کنید .
Download : لینک دانلود رو مشخص می کنید .
Href : لینک مقصد رو مشخص می کنید .
Hreflang : زبان لینک مقصد رو مشخص می کنید .
Rel : رابطه بین سند جاری و URL مورد نظر رو تعیین می کنید .
Shape : نوع اشکال ناحیه رو مشخص می کنید . این خاصیت دارای ۴ مقدار زیر هست :
- Default : شکل پیشفرض
- rect : مستطیل
- circle : دایره
- poly : اشکال نامنظم
Target : نحوه باز شدن پنجره ی صفحه ی مقصد رو مشخص می کنید . این خاصیت دارای ۴ مقدار زیر هست :
_blank , _parent , _self , _top : توضیحات هر کدوم و تو جلسه قبل دادم .
خوب حالا چطور میتونیم این مختصات رو مشخص کنیم ؟ شما به راحتی میتونید توسط نرم افزار Dreamweaver هر تصویری که میخواین رو تقسیم بندی کنید و برای هر قسمت لینک ایجاد کنید . میتونید تو تصویر زیر ScreenShot این بخش رو ببینید:
برای درک بهتر از image map فایل ضمیمه رو دانلود کنید .
خوب جلسه ی امروزمونم تموم شد ، امیدورام مفید واقع شده باشه .
تهیه شده در مدرسه مجازی ایرانیان
با سلام و عرض ادب
در توضیح خاصیت های اصلی عنصر img خاصیت width به اشتباه with تایپ شده است.
صرفا جهت اطلاع و ممنون از این مطلب خوبتون.
سلام دوست عزیز
ممنون ، اصلاح شد : )
موفق باشید
لطفاً از هر کد نمونه هم بزارید تا ما ببینیم.
سلام
ممنون بابت مطالب مفید شما.
اگر بخوایم هر area موقع hover رنگش تغییر کنه ، چیکار کنیم ؟
سلام ، اگر منظورتون textarea هست از دستور زیر میتونین استفاده کنین:
textarea:hover{}