ویژگی های image

زمانی که از img استفاده می کنید، در واقع از یک تگ html استفاده کرده اید. قسمت src یک ویژگی نامیده می شود.

ویژگی های بسیاری وجود دارند که می توان از آنها در تگ img استفاده کرد. ویژگی های تگ img در html5 شامل موارد زیر هستند:

ART
SRC
HEIGHT
WIDTH
USEMAP
ISMAP

در نسخه قبلی html، ویژگی های زیر قابل استفاده بودند:

ALIGN
BORDER
HSPACE
VSPACE

اگر چه ویژگی های فوق اکنون منسوخ هستند، ولی هنوز می توان از آن ها استفاده کرد.نحوه استفاده از ویژگی ها به صورت زیر می باشد :

ویژگی Alt:

اولین ویژگی، ویژگی alt است. نحوه استفاده از آن به صورت زیر می باشد:

<IMG SRC="york_images/york_minster.jpg" ALT="York Minster">

alt از کلمه Alternative Text به معنای " متن جایگزین" گرفته شده است و در صورتیکه تصویر نمایش داده نشود به جای آن متنی که داخل دو علامت "" قرار گرفته است نمایش داده می شود.

برای تمرین این ویژگی، کد html زیر را در فایل خود وارد نمایید:

<IMG SRC="york_images/york_min.jpg" ALT="York Minster">

در مثال فوق، نام فایل تصویر را تغییر داده ایم. حال تغییرات را ذخیره و صفحه مرورگر را به روز رسانی نمایید. نتیجه کار به صورت زیر خواهد بود (در مرورگر اینترنت اکسپلورر):

اینترنت اکسپلورر، متن alt را بعد از آیکون x قرمز قرار داده است. شما می توانید همیشه متنی را به عنوان ویژگی alt برای تگ های img خود وارد نمایید و این کار به موتورهای جستجو نیز در یافتن تصاویر کمک می کند، به خصوص موتور جستجوی گوگل.

ویژگی عرض و ارتفاع:

عمل دیگری که برای تگ img می توان انجام داد، مشخص کردن عرض و ارتفاع تصویر است. استفاده از این ویژگی بسیار آسان است، تگ img را به صورت زیر تغییر دهید:

<IMG SRC="york_images/york_minster.jpg" HEIGHT="512" WIDTH="384">

ابعاد عکس اصلی 2048*1536 پیکسل می باشد. با تغییر عرض و ارتفاع، می توانیم ابعاد عکس را کاهش دهیم. بارگذاری خود عکس، به همان اندازه ابعاد قبلی زمان می برد، به این دلیل که تغییری در حجم فایل ایجاد نشده است. تنها کاری که انجام دادیم تغییر عرض و ارتفاع تصویر است.

ویژگی usemap

ویژگی usemap برای تبدیل نقاطی از تصویر به لینک های قابل کلیک شدن استفاده می شود. به عنوان مثال تصویر زیر را در نظر بگیرید، ما نمی خواهیم کل عکس یک لینک باشد، بلکه تنها به لینک شدن اشکال رنگی احتیاج داریم.

اگر اشاره گر ماوس را بر روی قسمت خاکستری ببرید، اتفاقی نمی افتد و اشاره گر ماوس تغییر نمی کند.

حال ماوس را بر روی یکی از اشکال هندسی ببرید، تغییر را اشاره گر ماوس نشان می دهد که شکل اشاره شده یک لینک است.

تمام عملیات فوق با ویژگی usemap انجام می شود. یک تگ img با ویژگی usemap به صورت زیر تعریف می شود:

<IMG SRC="images/shapes.gif" USEMAP="#shapes_1">

بعد از ویژگی usemap یک علامت مساوی و سپس نام map که قبل از آن علامت # قرار گرفته است، قرار می گیرد. نام map به صورت دلخواه می تواند انتخاب شود.

زمانیکه نام MAP را وارد کردید، لازم است خود MAP را ایجاد نمایید. نگاه به کد زیر بیندازید. این کد MAP تصویر فوق می باشد:

<MAP NAME="shapes_1">

<AREA SHAPE="Rect" coords="37, 25, 137, 72" href="#">
<AREA SHAPE="Circle" coords="205 49, 29" href="#">
<AREA SHAPE="Poly" coords="317, 23, 349, 76, 284, 76" href="#">

</MAP>

بنابراین دو تگ آغازین و پایانی برای map نوشته می شود. تگ آغازین حاوی ویژگی name می باشد. این نام از عنوان usemap کد در تگ img می باشد.

 درون دو تگ map ، حداقل یک تب Area مورد نیاز است. هر تگ Area، ویژگیهای مخصوص خود را دارا است:  shape، coords، و href. مقادیری که برای ویژگی shaps قابل استفاده است عبارتند از: rect (مخفف rectangle به معنی مستطیل )،  circle و  poly (مخفف polygon به معنی چند ضلعی). هر شکل احتیاج به تعدادی مختصات دارد (ویژگی coorels  ). برای هر شکل مستطیلی داخل تصویر، می بایست مختصات گوشه ی بالا و سمت چپ را به واحد پیکسل بدست آورید. در مثال ما این نقطه 37 و 25 می باشد.  یعنی فاصله افقی بین شکل مستطیل و لبه سمت چپ تصویر 37 پیکسل می باشد. (محور x) و فاصله عمودی بین شکل مستطیل و لبه بالایی تصویر 25 پیکسل می باشد (محور y). به همین ترتیب مختصات گوشه پائین و سمت راست شکل مستطیل، 137 پیکسل در محور xها و 72 پیکسل در محور y ها می باشد.

برای شکل دایره، مختصات x و y مرکز دایره مورد نیاز است که از سمت چپ تصویر و نه سمت چپ دایره اندازه گیری می شود و برای مختصات  y نیز از لبه بالایی تصویر اندازه گیری می شود. سومی مختصات که برای شکل دایره مورد نیاز است، شعاع دایره می باشد (نصف قطر ).

برای شکل چند ضلعی برای هر نقطه به مختصات x و y آن نقطه احتیاج داریم. چند ضلعی نادر شکل فوق یک مثلث است، بنابراین برای هر یک از سه نقطه آن مقدار مختصات x  و y نوشته شده است.

ویژگی href، آدرس صفحه ای است که بعد از کلیک بر روی اشکال هندسی، مرورگر به آنجا هدایت می شود. ما به جای آدرس یک علامت # قرار داده ایم . این به آن معنی است که " جایی نرو و در همین صفحه بمان".

در بخش بعدی، نحوه اعمال تنظیمات بر تصاویر با استفاده از Css را خواهیم آموخت.