BRAINFART

Here we want to review some ways of replacement of text with pictures.

What for?

Often we would desire the headings to be beautiful and we would not want to be limited by a few user fonts (those which everyone has). This is where we can replace this text (to leave it in a code for search crawlers and others user agents) by pictures or flash. So firstly lets replace the following code with a picture:

	<h1>heading - image</h1>

1. Methods without changing HTML

I usually use them, when it is not necessary to pay much attention on compatibility in different browsers. The most popular of them:

• 1. LIR (it is also known as Phark Method):

  h1{ 
  	text-indent: -9000px; 
  	overflow: hidden; 
  	height:80px;width:200px; 
  	background-image: url("img.gif"); 
   }

• 2. Leahy/Langridge method:

  h1{ 
  	padding: 80px 0 0 0; 
  	overflow: hidden; 
  	background-image: url("img.gif"); 
  	height: 0px !important; /*works in most browsers */ 
  	height /**/:80px; /* works in block model IE5.5*/ 
   }

  Of cause it is necessary to insert your height instead of 80px.

• 3. MIR (Malarkey Image Replacement):

  h1{ 
  	letter-spacing :-1000em; 
  	height:80px;width:200px; 
  	background-image: url(”img.gif”); 
   }

All 3 methods will not show anything if you turn off displaying pictures. It is necessary to remember it. Availability suffers but sometimes there are situations in which these methods can help.

2. Methods with changing HTML

This methods require adding aditional code to HTML code.

• 1. Pixy Method:

  HTML:

  	<h1>heading - image<span></span></h1>

  CSS:

  h1{ 
  	margin:0; padding:0; 
  	position:relative; 
  	width:200px; height:80px; 
  	overflow:hidden; 
  } 
  h1 span { 
  	display:block; 
  	position:absolute; left:0; top:0; z-index:1; 
  	width:200px; height:80px; 
  	background:url("img.gif") no-repeat left top; 
   }

  If pictures displaying will be turned off the text still will be visible. This is one of the best methods - the main thing is not to forget to insert span. The background picture lays down on the text and at its absence the text will be seen through.

• 2. Thierry Image (re)Placement:

  HTML:

  	<h1><img src="pic.gif" />heading - image</h1>

  CSS:

  h1 { 
  	height:80px; 
  	width:200px; 
  	overflow:hidden; 
  	position:relative; 
  } 
  h1 img { 
  	z-index:1; 
  	position:absolute; 
  	top:0; 
  	left:0; 
   }

Other ways

Among other methods we should mention the following:

• 1. sIFR - replacement with the help of flash and javascript.
• 2. CSS3 method of text replacement:

  h1 {
  	content: url (img.gif); 
   }