5 شیوه جایگزینی متن با تصویر با استفاده از CSS

شیوه های رایج جایگزینی متن با تصویر با استفاده از CSS یکی از مواردی است که در طراحی وب اهمیت دارد. استفاده از این شیوه ها به بهینه بودن طراحی برای موتور های جستجو کمک می کند. بسیاری از طراحان مایلند که به جای متن عنوان بخش های مختلف سایت از یک تصویر استفاده کنند. این مورد برای طراحان ایرانی اهمیت بیشتری دارد چون متاسفانه برای زبان فارسی محدودیت فونت وجود دارد و تنها می توان از دو فونت استفاده کرد. با استفاده از تکنیک های جایگزینی متن با CSS می توانیم تصویری را به جای متن بخش عنوان خود قرار دهیم. به این شکل هیچ تغییری داخل کد صفحه نداده ایم و از طرفی حضور تگ های h1 تا h6 داخل صفحه باعث بالا رفتن ارزش صفحات برای موتور های جستجو خواهد شد.

هر کدام از این شیوه ها مزایا و معایبی دارند که سعی میکنیم هر یک را به طور مجزا بررسی کنیم. در ضمن فقط شیوه هایی را توضیح می دهیم که با زبان فارسی مشکلی نداشته باشد.

تکنیک 1

<h1 id="one">4goosh.com</h1>

h1#one {
width: 150px; height: 50px;
background: url('4goosh.png') no-repeat;
text-indent: -9999px;
overflow: hidden;
}

این شیوه را مایک راندل ساخته و به خاطر اسم وبلاگش به این شیوه، شیوه فارک هم گفته میشود. این تکنیک بیشترین استفاده را در بین طراحان وب دارد ( تکنیک مورد علاقه خودم ، البته شیوه بهتری هم وجود دارد ولی در بعضی از شرایط درست عمل نمی کند که در مورد آن در تکنیک شماره 5 می نویسم). البته دستور overflow: hidden را من به خاطر رفع مشکلی که این تکنیک با زبان فارسی به آن اضافه کرده ام. بدون این دستور. این شیوه در زبان فارسی و فایرفاکس با مشکل مواجه می شود و نوار پیمایش عرضی طویلی در زیر صفحه ظاهر خواهد شد. شیوه کار این تکنیک به این گونه است که تصویری در پس زمینه تگ مربوطه قرار می گیرد و متن داخل تگ با استفاده از مقدار text-indent منفی از صفحه خارج می شود و دیگر دیده نمی شود.

تکنیک 2

<h1 id="two"><span>4goosh.com</span></h1>

h1#two {
width: 150px;
height: 50px;
background: url('4goosh.png') no-repeat;
}
h1#two span {
display: none;
}

این شیوه به شیوه FIR یا fahner image replacement معروف است و مقاله آن را می توانید در سایت A List Apart ببینید. این شیوه با زبان فارسی مشکلی ندارد و به خوبی با زبان فارسی سازگار است. ایرادی که به این شیوه گرفته می شود این است که برخی از نرم افزار هایی که صفحه را برای کاربر می خوانند. متن هایی که به آنها display: none اختصاص داده شده باشد را نمی خوانند. البته می توان به جای display: none از visibility: hidden نیز استفاده کرد.

تکنیک 3

<h1 id="three">
<a href="#">
<img src="4goosh.png" alt="4goosh.com" />
</a>
</h1>

h1#three {
width: 150px; height: 50px;
background: url('4goosh.png') no-repeat;
text-indent: -9999px;
overflow: hidden;
}

این تکنیک هم شباهت زیادی با تکنیک فارک دارد و تنها به جای متن یک لینک به یک تصویر قرار می گیرد. این شیوه یک مزیت بزرگ دارد که وقتی CSS غیر فعال باشد. تصویر در جای درستش نمایش داده می شود و از لحاظ بهینه بودن برای موتور های جستجو هم این شیوه مناسب است چون تصویر دارای alt است و تقریبا کار همان متنی را می کند که در شیوه فارک استفاده شده بود و اما نقطه ضعف این شیوه هم این است که تصویر دو بار load می شود. یکبار به عنوان پس زمینه تگ h1 و یکبار در داخل کد صفحه.

تکنیک 4

<h1 id="four">4goosh.com</h1>

h1#four {
width: 150px;
padding: 50px 0 0 0;
height: 0;
background: url('4goosh.png') no-repeat;
overflow: hidden;
}

این تکنیک هم به طور همزمان توسط دو طراح به نامه های seamus leahy و stuart langridge استفاده شد. در این تکنیک به اندازه ارتفاع تصویر به بالای تگ h1 فاصله padding اضافه می شود و از آنجایی که از overflow:hidden استفاده شده متنی که از داخل تگ h1 بیرون می زند و دیگر دیده نمی شود. این شیوه یکی از شیوه های مناسب است و مشکلش این است که به خاطر تعریف عرض ثابت و استفاده از padding مجبورید از هک box model استفاده کنید.

تکنیک 5

<h1 id="five"><span></span>4goosh.com</h1>

h1#five {
width: 150px; height: 50px;
position: relative;
overflow: hidden;
}
h1#five span {
background: url('4goosh.png') no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

این تکنیک هم توسط لوین الکساندر ایجاد شده است و به نظرم بهترین شیوه ممکن است. شیوه کاره این تکنیک اینگونه است که متن در داخل تگ h1 قرار داد و یک تگ span خالی قبل از متن داخل تگ h1 قرار میگیرید. ما تگ h1 را به شکل relative موقعیت دهی می کنیم و تصویر را در پس زمینه تگ span قرار می دهیم و آن را به شکل absolute موقعیت دهی می کنیم. حال تصویر را در پس زمینه span قرار می دهیم و با دادن width و height با مقدار 100% مطمئن می شویم که span کل عرض و طول عنصر والد خودش که تگ h1 است را می پوشاند. به این شکل تصویر بر روی متن قرار می گیرد. نکته مثبت این شیوه این است که اگر حتی تصویر را هم غیر فعال کنید ، متن همچنان در سر جای خود است. این خاصیتی است که در هیچ کدام از شیوه های قبلی وجود داشت. تنها مشکلی که وجود دارد این است که اگر در صفحه از تکنیک های jQuery یا فریم ورک های مشابه برای باز و بسته کردن بخشی از صفحه استفاده کنید که بر روی ارتفاع کل صفحه تاثیر بگذارد، در اینترنت اکسپلورر 6 ، تصویر شما در جای خودش ثابت می ماند و با صفحه حرکت نمی کند. متاسفانه راه حلی برای رفع این مشکل وجود ندارد. و مورد دیگری که در مورد این شیوه وجود دارد این است که شما مجبورید یک تگ span خالی به صفحه خود اضافه کنید در صورتی که در شیوه 3 ما هیچ تگی به صفحه اضافه نمی کردیم در کل از بین شیوه های توضیح داده شده، شیوه اول و پنجم از بقیه شیوه ها بهتر است.

فایل آماده مثال های بالا را می توانید از این لینک دریافت کنید

• CSS Sprite چیست ؟
• سمینار تخصصی CSS (رایگان)
• شروع کار با جی کوئری
• 5 ترفند برای کاهش مصرف RAM مرورگر فایرفاکس
• اصول طراحی بر اساس استاندارد های وب 2.0 - قسمت دوم
• چرا jQuery بهترین انتخاب است ؟
• معرفی jQuery
• 7 ترفند برای حفاظت وردپرس در مقابل هکر ها
• آیا فایرفاکس با SpiderMonkey وب را متحول خواهد کرد ؟

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