[joezim007]

This tutorial is about replacing h1-h6 tags with images. This is done for numerous reasons: aesthetics, use of a font that most people probably don't have, and others. Everyone's got their reason(s). There are a few things to take into consideration for these methods including people requiring screen readers, CSS being disabled/unavailable, images being disabled/unavailable, and making sure text is available for search engines. So here are a few methods:

Method 1 - Using an Image inside the Header
This method simple involves putting your logo in a heading tag, and giving it relevant alt and title attributes. It works well with simple logos, but if you want cool rollovers etc, you will need a different method.

(X)HTML Code

<h1>
   <a href="home.htm" title="homepage">
	  <img src="logo.gif" alt="Site name" />
   </a>
</h1>

Suits - Simple logo’s with an alt tag, and possibly a link

Pro’s - Alt text should remain visible with images off, logo visible when CSS disabled

Con’s - No css rollovers, you must resort to Javascript


Method 2 - Modified Phark Method
This method involved using a CSS background image to show the logo. If CSS is disabled you still see the heading text, however with images off and CSS on the logo is hidden, which is a shame.It works by indenting the text out of sight, and showing the background image. I use this one when I have a transparent logo, e.g. A transparent png, since other methods (like Gilder/Levin below) show the heading text underneath the image.

(X)HTML Code

<h1>
	<a title="Homepage" href="home.htm">
	<span>
		Site name
	</span></a>
</h1>

CSS Code

h1 a span
{
		height:164px;
		width:219px;
		background: url('logo.png') no-repeat;
		text-indent: -5000px;
}
h1 a:hover span
{
		height:164px;
		width:219px;
		background: url('logoHover.png') no-repeat;
		text-indent: -5000px;
}

Suits - Headings when you want a link, and your logo is transparent.

Pro’s - Text displayed when images off, transparent images work, css rollovers work.

Con’s - Breaks with images off and CSS on.



Method 3 - Modified Gilder/Levin Method
This method is good when using opaque images. It works by hiding the text with a background image via CSS, it does however need some un-semantic markup; but thats a small price to pay. The span is basically positioned to cover up the header text, thats the reason it needs to be opaque. And remember; the width and height must match the image!

(X)HTML Code

<h1 id="header">
	Site name<span></span>
</h1>

CSS Code

h1#header
{
	  margin:0; padding:0;
	  position:relative;
	  width:316px; height:29px;
	  overflow:hidden;
}
h1#header span
{
	  display:block;
	  position:absolute;
	  width:316px; height:29px;
	  margin:0; padding:0;
	  background:url(logo.gif) top left no-repeat;
}

Suits - Headings when you want a link, and your logo is opaque.

Pro’s - Text displayed when images off and also when CSS off.

Con’s - Cannot use a transparent image.


Method 4 - Hide words, Use Background
This method is the one I use the most, personally. It involves putting the text in a span tag and making the span invisible and giving the header a background image. Remember to resize the header so that it is tall enough for the background.

(X)HTML Code

<h1>
	<span>Hello World</span>
</h1>

CSS Code

h1 {
	  background-image:url(”hello_world.gif”);
	  background-repeat:no-repeat;
	  height:35px; /*Height of the image being used as the background. You can also set width if you don't want to position the 
							background or set to no-repeat.*/
}
h1 span {
	  display:none;
	  -or- (either works and doesn’t make much difference between screen readers)
	  visibility:hidden;
}

Suits - Most Headers or any block level element with text.

Pro’s - Works well in any occasion where CSS is off.

Con’s - Doesn't work is CSS is on and images are off.