ITTutorial مرجعی برای طراحان وب سایت

جایگزین کردن نوشته با تصویر توسط CSS مهارتی است که هر طراح وبی به آن نیازمند است. این در حالی است که تنها حذف نوشته و نمایش یک تصویر به جای آن مشکل را حل نمی کند بلکه مشکل اساسی تری را بوجود می آورد و آن index نشدن توسط موتورهای جستجو است. برای حل این مشکل هم راه حلهای مختلفی ابداع شد. در این مقاله ۹ روش را خواهید خواند که توسط آنها می توانید جایگزینی نوشته با تصویر را به خوبی انجام دهید. در هر روش معایبق و مزایای آن ذکر شده است. در انتهای هر روش نیز یک جدول وجود دارد که وضعیت تکنیک بکار رفته را از ۵ دیدگاه مختلف گزارش می دهد.

• CSS ON / Images ON
این وضعیت پیش فرض و معمولی است که در آن هم نمایش تصاویر و هم استفاده از CSS در مرورگر کاربر فعال است. در این وضعیت تکنیک مورد استفاده باید نمره قبولی بگیرد.

• CSS ON / Images OFF
در این وضعیت نمایش تصاویر در مرورگر کاربر غیر فعال شده ولی استفاده از CSS همچنان فعال است. در این تست انتظار داریم بجای تصاویر نوشته ها نمایش داده شوند.

• CSS OFF / Images ON
در این وضعیت استفاده از CSS غیر فعال و نمایش تصاویر فعال است. هنگامیکه استفاده از CSS در یک مرورگر غیر فعال باشد، مرورگر از CSS های پیش فرض خود استفاده می کند که غالبا به نمایش نوشته ها منتهی می شود. در این وضعیت انتظار داریم که نوشته ها نمایش داده شود.

• CSS OFF / Images OFF
در این وضعیت هم نمایش تصاویر و هم استفاده از CSS غیر فعال شده است. بدین ترتیب انتظار داریم نوشته ها نمایش داده شوند.

• استفاده از Markup اضافی
استفاده از Markup اضافی تنها به دلیل جایگزینی نوشته با تصویر ایدا آل نیست. به این دلیل که می توان گفت با این کار نتوانسته ایم به درستی محتوی (content) را از طرح (Design) جدا کنیم.

تکنیک شماره ۱

<h1 id=”technique-one”>
<span>CSS-Tricks</span>
</h1>

h1#technique-one {

width: 250px;

height: 25px;

background-image: url(logo.gif);

}

h3#technique-one span {

display: none;

}

نام این تکنیک FIR یا همان “Fahrner Image Replacement“ است. مقاله های زیادس در مورد این روش نوشته شده است از جمله مقاله مفصلی که توسط List Apart در مورد مطعضلات این روش نوشته منتشر شده و همچنین مقاله‌ای که در دفاع از این روش توسط دیوید شی نوشته شده است.

اساس این روش قرار دادن نوشته درون Header درون یک تگ span و استفاده از این تگ برای مخفی کردن نوشته است. این روش عملی است اما استفاده از display:none نوشته را از دید screan reader ها و همچنین احتمالاً از دید موتورهای جستجو پنهان می‌کند که این اصلاً خوب نیست.

تکنیک شماره ۲:

<h1>

CSS-Tricks

</h1>

h1.technique-two {

width: 2350px; height: 75px;

background: url(”images/header-image.jpg”) top right;

margin: 0 0 0 -2000px;

}

این تکنیک توسط رادو دارواس ابداع شد. در این روش یک باکس بسیار بزرگ ساخته می‌شود و در منتهی الیه سمت چپ صفحه قرار می گیرد. نوشته درون این باکس نیز طوری مرتب شده‌اند که در سمت چپ قرار بگیرند(left-justified) و در نتیجه دیده نخواهند شد. تصویر جایگزین در بالا و سمت راست این جعبه قرار می گیرد. این روش کار می‌کند ولی مشکل آن این است که در حالت CSS ON / Images OFF نه تصویر نمایش داده می‌شود و نه نوشته. این باکس بزرگ هم در طرحهای پیچیده می‌تواند مشکل ساز باشد. در ضمن این روش از روشهای دیگر ناکارآمدتر است.

تکنیک شماره ۳:

<h1>

CSS-Tricks

</h1>

h1.technique-three {

width: 350px; height: 75px;

background: url(”images/header-image.jpg”);

text-indent: -9999px;

}

این تکنیک توسط مایک داندل ابداع شده و معروف به روش فارک (Phark) است. این روش را می‌توان یکی از پر استفاده ترین روشهای جایگزین کردن نوشته با تصویر نامید. اساس این روش بسیار ساده است. تصویر مورد نظر را به عنوان یک تصویر پس زمینه برای بلوک مورد نظر که در مثال بالا h1 است تعریف کرده و نوشته را با استفاده از text-indent از صفحه و در نتیجه دید بازدیدکننده بیرون کنید. در این روش یا اینکه نوشته توسط چشم دیده نمی‌شود اما توسط screen reader ها خوانده می شود. تننها مشکل این روش زمانی آشکار می‌شود که در حالت CSS ON / Images OFF قرار داشته باشیدو در این حالت نه نوشته دیده می‌شود و نه تصویر. البته تلاشی برای حل این مشکل صورت گرفته ولی این راه حل نیز در بعضی از مرورگرها باعث پدیدار شدن scroll bar های ناخواسته و بزرگی می شود.

تکنیک شماره ۴:

<h1>

<a href=”#”>

<img src=”images/header-image.jpg” alt=”CSS-Tricks” />

</a>

</h1

h1.technique-four {

width: 350px; height: 75px;

background: url(”images/header-image.jpg”);

text-indent: -9999px;

}

این روش در حقیقت برگرفته از روش فارک اینکه در تکنیک قبلی شرح داده شد با این تفاوت که در روش فارک شما نوشته را با استفاده از text-indent از دید پنهان می‌کردید ولی در این روش یک تصویر را از دید پنهان می کنید. با این کار حتی در حالت CSS OFF / Images ON نیز یک تصویر دیده خواهد شد.  به علت استفاده از Alt text نیز این روش مشکلی با موتورهای جستجو ندارد. اما این روش در حالت CSS ON / Images OFF نیز از آزمایش انجام شده سر بلند بیرون نمی آید. با غیر فعال کردن نمای تصاویر در مرورگر هیچکدام از تصاویر نمایش داده نمی شود.

نکته‌ای که در مورد این تکنیک باید مورد توجه قرار گیرد این است که ممکن است Alt text از نظر موتورهای جستجو به خوبی مورد توجه قرار نگیرد به همین دلیل می‌توان در قسمت لینک نوشه را هم نوشت. حالا test-indent باعث می‌شود هم نوشته و هم تصویر از دید پنهان شوند و از طرفی به دلیل وجود نوشته مشکلی هم با موتورهای جستجو بوجود نمی آید. مشکل این روش هم وقتی است هم CSS و هم نمایش تصاویر غیر فعال شده باشند که در این صورت مشکل double text بوجود می‌آید که این یعنی نمایش همزمان Alt text تصویر و نوشته لینک.

تکنیک شماره ۵:

<h1>

<img src=”images/blank.gif” alt=”CSS-Tricks” />

<span>CSS-Tricks</span>

</h1>

h1.technique-five {

width: 350px; height: 75px;

background: url(”images/header-image.jpg”);

}

h1.technique-five span {

display: none;

}

این تکنیک نیز توسط رادو دارواس ابداع شده است. در این تکنیک یک تصویر Gif شفاف یک پیکسلی استفاده می‌شود تا بتوان با استفاده از Alt text آن مشکل را با موتورهای جستجو حل کرد. با این کار نوشته در حالت CSS ON / Images OFF  دیده می شود. روش موثری است اما افزودن یک تصویر شفاف کمی بدور از منطق است. همچنین در حالت CSS OFF / Images OFF حالت double text بوجود می آید.

تکنیک شماره ۶:

<h1>

CSS-Tricks

</h1>

h1.technique-six {

width: 350px;

padding: 75px 0 0 0;

height: 0;

background: url(”images/header-image.jpg”) no-repeat;

overflow: hidden;

}

این تکنیک هم‌زمان توسط سیموس لیهی و استوارت لانگریج ابداع شد. در این تکنیک یک باکس ساخته می‌شود که ارتفاع آن توسط padding تعریف شده است. و به علت استفاده از overflow: hidden  به صورت خودکار نوشته نمایش داده نمی‌شود اما اندازه باکس برای قرار گرفتن تصویر مورد نظر مناسب خواهد بود. این تکنیک مشکلی با Screan Reader ها ندارد اما در حالت CSS OFF / Images ON جوابگو نیست. در ضمن برای درست کار کردن این روش در نسخه های قدیمی IE باید ترفند های خاصی را بکار بگیرید.

تکنیک شماره ۷:

<h1>

<span>CSS-Tricks</span>

</h1>

h1.technique-seven {

width: 350px; height: 75px;

background: url(”images/header-image.jpg”) no-repeat;

}

h1.technique-seven span {

display: block;

width: 0;

height: 0;

overflow: hidden;

}

این تکنیک توسط لئون داویر ابداع شده است. در این روش نوشته در یک باکس با طول و عرض ۰ پیکسل قرار می‌گیرد و سپس با استفاده از  overflow: hidden از دید پنهان می‌شود. این روش هم مشکلی با Screen Reader ها ندارد.

تکنیک شماره ۸:

<h1>

<span>CSS-Tricks</span>

</h1>

h1.technique-eight {

width: 350px; height: 75px;

position: relative;

}

h1.technique-eight span {

background: url(”images/header-image.jpg”);

position: absolute;

width: 100%;

height: 100%;

}

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

تکنیک شماره ۹:

<h1>

<span>CSS-Tricks</span>

</h1>

h1.technique-nine {

width: 350px; height: 75px;

background: url(”images/header-image.jpg”) no-repeat;

font-size: 1px;

color: white;

}

این تکنیک توسط راس ویکلی ابداع شده است. در این روش شما اندازه نوشته را بسیار کوچک (۱ پیکسل)در نظر گرفته و رنگ آنرا به رنگ پس زمینه تصویر تغییر می‌دهید و همین باعث می‌شود نوشته دیده نشود. این روش در حالت CSS ON / Images OFF کارآمد نیست. به نظر می‌آید این روش با SEO مشکل داشته باشد هم به دلیل یک رنگ بودن نوشته با رنگ پس زمینه و هم به دلیل خیلی کوچک بودن اندازه آن.

Edit this page (if you have permission) |

نوشته شده توسط کامران

ادمین سایت ITT، مهندس کامپیوتر و متخصص ارشد طراحی وب سایت (CIW)و علاقمند به طراحی وب سایت، SEO، بازاریابی اینترنتی، تجربه تکنیکها و روشهای جدید طراحی و پیاده سازی ایده های جدید