This week Ive been trying out a lot of image replacement techniques in main headings, and their are quite a few available. If you have a graphical header logo on a website, with the sites name, often you wont want to have another heading as plain text. Yet, you should want to have the heading readable by screen-readers, and you also want the SEO benefits of the heading.
Ive rounded up my favorite methods, and this entry will show you how to use them, and when to use them.
Method 1 – Stick the image in the Heading tag
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
<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 – Phark Method – modified
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.
My modded code below also allows pretty rollovers, a nice addition.
(X)HTML
<h1>
<a title="Homepage" href="home.htm">
<span>
Site name
</span></a>
</h1>CSS
h1 a span
{
height:164px;
width:219px;
background: url('logo.png') no-repeat;
text-indent: -5000px;
}
h1 a:hover span, div#header h1 a:focus 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 – Gilder/Levin Method – modified
This method is my favorite 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
<h1 id="header">
Site name<span></span>
</h1>CSS
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.
Conclusion
So they were my favorite methods, but are they best? DO you have better solutions? Leave a comment and tell me your views on image replacement.