درس بسيط حول كيفية إستبدال أو تحويل عنوان أو نص مكتوب إلى صورة ، هناك أمثلة كثيرة فمثلاً يمكنك أن تضع صورة الشعار بدلاً من عنوان الموقع في الأعلى أو إذا أردت إستبدال صورة تكتب فيها عنوان فقرة أو عنوان قائمة بدلاً من وضعها بكتابة نصية ، درس سهل وبسيط جداً.

الخطوة الأولى: كتابة شفرة HTML

تحتوي الشفرة على فقرة وعنوان ، في هذا الدرس كتبنا هذه الشفرة وسنطبق ما نريده على عنوان موقع مثلاً بإستخدام العنصر h1 :

<div id="header">
<h1 class="logo">مثال على درس إستبدال النص بالصورة</h1>
مثال بإستخدام خاصية text-indent</div>

حددنا كلاس بإسم logo (حدد الكلاس بأي إسم تريده) وعن طريقة سنطبق خصائص CSS في العنوان الذي حددناه.

الخطوة الثانية: تحديد الخصائص عن طريق CSS

ستبقى لنا شفرة CSS والتي من خلالها سيكون النص المكتوب مخفي على متصفح الويب ، أنظر إلى الشفرة التالية مع وظيفة الخاصية التي حددناها:

h1.logo2 {
	margin: 0 auto;
	background-image: url(image.gif);  /* تحديد الصورة  */
	background-repeat:no-repeat; /* عدم تكرار الصورة  */
	width: 405px; /* عرض الصورة  */
	height: 29px; /* طول الصورة  */
	text-indent: -9999px;
}

الخصائص التي حددناها:

  • إستدعاء الصورة بإستخدام الخاصية background-image ، مع بقية الخواص التابعة لخاصية background بشكل عام.
  • إستخدام خاصية text-indent وذلك فصل النص عن المكان الذي وضعناه فيه بإدخال قيمة المسافة وهي -9999px.

ملاحظة: إذا كنت تريد إستبدال العنوان بصورة معينة بإستخدام الوسم span أو تريد جعله رابط تشعيبي إضف خاصية display وأشر لها بـ block:

h1.span { display: block; }
h1.span span { display: none; }