احاطه تصاویر توسط متون

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

Absbottom، Absmiddle، Bottom، Middle، Left، Right، Texttop، Top

بنابراین ویژگی چینش تصویر به صورت زیر قابل تنظیم بود:

<IMG SRC="york_images/york_minster.jpg" ALIGN="Top">

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

به عبارتی دیگر متن، تصویر را احاطه می کند.

در html5، احاطه عکس توسط متن، به وسیله css انجام می شود. به عنوان مثال در شکل زیر عکس و متن کنار هم قرار گرفته اند.

همانطور که در تصویر فوق پیداست، عکس در سمت راست صفحه قرار دارد و متن با رعایت کمی فاصله به صورت شناور در کنار آن قرار گرفته است، برای ایجاد تنظیمات فوق، می بایست استایل مربوطه را در قسمت head یا فایل css به صورت زیر ایجاد نماییم:

به این ترتیب استایلی با نام TextWrap ایجاد کرده ایم که دارای دو ویژگی زیر می باشد:

float: right;
margin: 10px;

ویژگی css ای که برای حرکت عکس در صفحه مورد نیاز است، float نام دارد. برای ویژگی float ، سه مقدار قابل قبول می باشد: left،right و none.(راست، چپ و هیچکدام) برای ایجاد مقداری فاصله میان عکس و متن، می توانیم از ویژگی margin استفاده نماییم که در مثال فوق مقدار آنرا برابر با 10px تنظیم کرده ایم. در این صورت، فاصله ای به اندازه 10 پیکسل، دور تا دور عکس ایجاد می شود.چنانچه بخواهیم فاصله را فقط در یک سمت عکس ایجاد کنیم، ویژگی margin را به شکل زیر بکار می بریم:

margin-left
margin-right
margin-top
margin-bottom

بنابراین در مثال قبلی می توانستیم  ویژگی فاصله را به صورت زیر تنظیم نماییم:

margin-left: 10px;
margin-bottom: 10px;

در این صورت فاصله ای به اندازه 10 پیکسل از سمت چپ و سمت پائین تصویر خواهیم داشت.

برای ثبت استایل تعریف شده برروی عکس، می بایست ویژگی class در تگ img مورد نظر را تنظیم نماییم:

<IMG SRC="york_images/york_minster_2.gif" CLASS="TextWrap">

نکته: ویژگی کلاس در یک تگ، لازم نیست که حتما در انتهای تگ قرار بگیرد، در ابتدای تگ و بعد از نام تگ نیز می توان آنرا اضافه کرد:

<IMG CLASS="TextWrap" SRC="york_images/york_minster_2.gif" >

فقط به قسمت هایی که فاصله وجود دارد در تگ فوق دقت کنید.

حال برای تمرین کلاس TextWrap را در کدهای خود ایجاد کرده و همچنین پاراگراف زیر را بعد از تگ img قرار دهید:

 

<IMG class="TextWrap" SRC="york_images/york_minster_2.gif">
<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra.
</P>

البته می توانید از هر متن دلخواه استفاده کنید. مطمئن شوید که تگ <img> در بالای تگ <p>  قرار گرفته باشد.

تغییرات را ذخیره و نتیجه را در مرورگر مشاهده نمایید.

در کدهای فوق یک مشکل وجود دارد. تصور کنید که می خواهیم یک پاراگراف و عکس دیگر (در سمت چپ صفحه) نیز در صفحه اضافه کنیم.

در اینجا، عکس دوم در قسمت پایئن و چپ عکس اول قرار گرفته است. همچنین متون نیز در قسمت صحیح قرار گرفته اند.

برای پیاده سازی شکل فوق، ممکن است به فکر ایجاد یک استایل جدید برای عکس دوم بیفتید، مانند زیر:

در استایل دوم، از ویژگی float: left و فاصله ای 10 پیکسل استفاده کرده ایم.

در هر صورت ذخیره تغییرات و بروزرسانی مرورگر، نتیجه زیر را در بر خواهد داشت:

همانطور که مشاهده می کنید، تصویر دوم، از دو سوم پایئن تصویر اول و سمت چپ آن آغاز شده است و متن نیز به صورت دلخواه ما شناور نشده است.

برای اصلاح مشکل فوق با استفاده از css، ویژگی clear مورد استفاده قرار می گیرد. این ویژگی، تاثیر عناصر شناور را از صفحه پاک کرده و صفحه را به صورت جریان طبیعی و پیش فرض مرورگر باز می گرداند. ویژگی clear، چهار مقدار را قبول می کند: left, right, both, none.(چپ، راست، هر دو و هیچ کدام). به دلیل اینکه عکس اول، به سمت راست شناور بود، می بایست اثر شناورهای راست از صفحه حذف شود. بنابراین می توانیم استایل زیر را ایجاد نماییم:

    اگر تصویر اول ما به سمت چپ شناور بود، از ویژگی clear:right استفاده می کردیم.

در درس بعدی، با نحوه اضافه کردن حاشیه به اطراف تصویر آشنا خواهیم شد.