CSS Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 300,397 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,624 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Image Replacement Techniques

Image Replacement Techniques, Replacing a <H#> tag with an image

Options

joezim007

9 Jan, 2009 - 06:22 PM

Post #1

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

CODE

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

CODE

CSS Code

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

CODE

CSS Code

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

CODE

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

CSS Code

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.