تصاویر در HTML (جلسه ششم)
سلام و درود خدمت شما دوستان عزیز و همراهان مِستر آموز.
برچسب <img> و مشخصه src:
تصاویر در فایل های HTML توسط برچسب <img> قرار داده می شوند. این برچسب ، یک تگ نیاز به تگ انتهایی ندارد. فقط شامل مشخصه های مربوط به خود می باشد. برای مشخص کردن تصویری که باید در صفحه قرار بگیرد نیاز به استفاده از مشخصه (src (source داریم که به وسیله آن آدرس و نام فایل معرفی می شود.
<img src="http://www.you.com/image.gif">
اگر فایل HTML و تصویر در یک آدرس باشند دیگر نیازی به نوشتن آدرس فایل قبل از نام آن نیست و فقط <“img src=”image.gif> را می نویسیم
مشخصه alt:
این مشخصه برای ایجاد یک متن توصیفی بر روی تصویر بکار می رود. و وقتی کاربر ماوس را روی تصویر می برد و نگه میدارد، متن استفاده شده برای مشخصه alt در یک کادر کوچک دیده خواهد شد این مشخصه بیشتر وقتی استفاده خواهد شد که کاربر به هر دلیلی نتواند تصویر را در صفحه ببیند در آن موقع کاربر به جای تصویر عبارت مشخصه alt را خواهد دید.
<img src="html.jpg" alt="HTML" />
تصویر پس زمینه
برای اضاف کردن تصویری به پس زمینه صفحه می توانید از ساختار زیر استفاده کنید:
<body background="html.jpg">
به جای html.jpg می توانید نام هر فایل تصویری دیگری با هر پسوندی را قرار دهید.
اگر ابعاد تصویر شما از صفحه کوچکتر باشد تصویر تا پر کردن کل صفحه تکرار خواهد شد. پس اگر تصمیم دارید که تصویری به پس زمینه خود اضاف کنید توصیه می شود که از فایل های کوچک که میتوانند مانند موزائیک در کنار هم قرار گیرند، استفاده کنید، ضمنا در انتخاب تصویر و انتخاب رنگ متن دقت کنید تا متن شما خوانایی خود را از دست ندهد. به تصویر زیر دقت کنید:
ولی حالا میخواهیم از تصویر مناسب و رنگ متن مناسب استفاده کنیم.
<body background="background.jpg" text="#ffffff"> <p style="font-size:40px;"> this is a first text </p> <p style="font-size:40px;"> this is a first text </p> <p style="font-size:40px;"> this is a first text </p> </body>
خروجی:
مشخصه align در تصاویر
این مشخصه طریقه تراز شدن تصاویر و متن را تعیین می کند. مثال زیر در همین رابطه است.
توجه داشته باشید که تصاویر به طور پیش فرض به صورت “align=”bottom قرار خواهند گرفت.
همچنین مشخصه align می تواند طرز قرار گرفتن یک تصویر در کنار یک پاراگراف را تعیین کند که مثلا تصویر در سمت راست نوشته قرار گیرد یا در سمت چپ آن.
<body background="background.jpg" text="#ffffff"> <img src="html.jpg" align="left"/> <p style="font-size:40px;"> this is a First text </p> <p style="font-size:40px;"> this is a Second text </p> <p style="font-size:40px;"> this is a Third text </p> </body>
خروجی:
تغییر ابعاد تصاویر
توسط مشخصه width , height میتوانید ابعاد تصویر را تغییر داده و آن را به اندازه دلخواه دراورید. فقط دقت کنید که ابعاد را متناسب تغییر دهید چون در غیر این صورت تصویر وضوح و زیبای خود را از دست خواهد داد.
<img src="html.jpg" height="50" width="50" /><br>
خروجی:
ساخت لینک برای تصویر
شما می توانید با ساخت لینک برای تصویر با کلیک بر روی هر جای تصویر به آدرس مورد نظر متصل شوید برای اینکار باید از روش زیر استفاده کنید:
<a href="http://www.webamooz.co"><img src="html.jpg" ></a>
همانطور که میبینید به جای نوشتن عنوان در بین تگ های ابتدایی و انتهایی لینک کد تصویر مورد نظر خود را می گذاریم.
ساخت لینک بر روی قسمتی از تصویر
برای این کار باید از دو برچسب <map> و <area> استفاده کنید. روش کار بدین صورت است که ناحیه هایی را که میخواهید کاربر با کلیک بر روی آن به صفحه دیگری متصل شود را توسط اشکالی مشخص می کنید. این اشکال دایره، مستطیل و چند ضلعی خواهند بود که توسط مشخصه shape تعیین میگردد.
دایره به صورت “shape=”circle معرفی می شود و مخصات آن توسط مشخصه cords تعیین می شود. مثلا در “cords=”39, 40 , 20 دو عدد اول مختصات مرکز دایره و عدد سمت راست اندازه شعاع دایره می باشد. مشخصه آشنای href که در برچسب <a> از آن استفاده می کردیم ، صفحه ای را که کاربر با کلیک بر ناحیه مشخص شده توسط شکل به آن منتقل خواهد شد را تعیین می کند.
مستطیل توسط “shape=”rect و مختصات قطر آن توسط “cords=”66, 15 , 110, 50 تعیین می شود که دو عدد سمت چپ مختصات گوشه بالای سمت چپ و دو عدد سمت راست مختصات گوشه پایین سمت راست می باشند.
چند ضلعی هم با “shape=”polygon مشخص میگردد و اعداد 2 به 2 مختصات گوشه های آن را تعیین می کند. “Cords: “140, 6, 120, 30, 12, 34, 192, 32, 34, 23, 32,32
همانطور که در مثال زیر می بینید برچسب <map> مشخصه ای به نام name دارد که توسط آن برچسب <img> با برچسب <map> ارتباط برقرار می کند برای ایجاد این ارتباط باید در برچسب <img> از مشخصه usemap استفاده کنیم که مقدار این مشخصه نام برچسب <map> می باشد. ضمنا نام برچسب <map> باید همراه با علامت # به کار برده می شود.
“Usemap=”#picture
<body> <map name="picture"> <area href="circle.htm" shape="circle" coords="30, 33, 27" alt="circle"> <area href="rectangle.htm" shape="rect" coords="64, 6, 95, 60" alt="rectangle"> <area href="polygon.htm" shape="polygon" coords="126,1, 106, 56, 166, 53, 158, 46,158,15" alt="polygon"> </map> <img border="0" src="picture.gif" usemap="#picture"> </body>
موفق و پیروز باشید.
