Tela-Web

Image replacement techniques

March 19th, 2007 tela

WordPress is a great Weblog platform. And what is even better it’s just an excellent publishing platform that lets you do a wide range of different websites.

After walking my way through several custom websites built on WordPress I realize that what I also value in WordPress is all the excellent lessons I learned in webdesign, especially in CSS.

It’s really by using WordPress that I understood all the power of CSS by totally separating content and design. Now when I read again their introduction every word makes sense to me.

WordPress is a state-of-the-art semantic personal publishing platform with a focus on aesthetics, web standards, and usability.

When I first read it I was thinking that were just words put together because they sound good and were trendy! But it’s really more than that.

I’m now trying my hands on Drupal. I have to admit that it’s probably more powerful as a CMS but honestly it doesn’t beat WordPress in terms of semantic web, web standards and usability.

They throw in plenty of class and ID selectors, so you can probably make your way through and build what you want to with this. But what a mess compare to the true semantic markup in WordPress!

So well, one of the lesson I learned in webdesign is about the image replacement technique. Now I am using it all the time for the heading on my websites.

In most cases, what we want to display as a heading at the top of the page is not just plain text, but rather something like a logo.

However the very top of the page is very precious in terms of SEO and we don’t want to waste this good location with just an image which is very poor. Even if you put a “title” and an “alt” in the image tag you don’t get as much benefit as if you put an h1 tag, plus a link to the home page with a title.

That’s why I now adopted the WordPress way to start any webpage. The html is always the same, something like this:

<h1 id="blog-title"><a href="http://blog-url.com/" title="Blog Title">Weblog Name</a></h1>

And in case I want to display an image instead of the plain text, I use the image replacement technique that uses the negative text-indent, as explained here: Accessible Image Replacement

The CSS looks something like this:

h1#blog-title {
 background:url(images.jpg) no-repeat left top;
}
h1#blog-title a {
 display:block;
 height:HEIGHT_OF_IMAGEpx;
 text-indent: -9999px;
 width: WIDTH_OF_IMAGEpx;
}

As I have a link inside <h1>, I have to add a few more lines to define a box where the link is active. That’s what I achieved with:

display:block;
 height:HEIGHT_OF_IMAGEpx;
 width: WIDTH_OF_IMAGEpx;

So okay. This method is nice and works very well in almost every case. But I’ve had lot of trouble when I tried to implement the same technique to replace the regular submit button in a form with an image.

So we have this html:

<form id="searchform" method="get" action="">
  <input id="s" name="s" type="text" value="" size="40" />
  <input type="submit" id="submit" name="searchsubmit" value="OK" />
</form>

And instead of the regular OK button we want to display some nice image here.

The problem with the previous technique is that it seems that text-indent doesn’t work with the <input> tag on some browsers among which IE6. We have the text that stays on top on the background image. It doesn’t shift to the side.

So I look for another solution and I came across this one that seems to work: A new image replacement technique

Though it was not working for IE6. But by simply setting the height of input equal to the height of the image, like for IE5, it solved the problem.

So here is the CSS:

form #submit {
background: url(images/bt_go.gif) no-repeat left top;
border: none;
height: 0px;
overflow: hidden;
padding: HEIGHT_OF_IMAGEpx 0 0 0;
width:WIDTH_OF_IMAGEpx;
}
*html form #submit {
 height:HEIGHT_OF_IMAGEpx;
}

So here are two image replacement techniques very useful to keep a semantic markup and SEO website.

Entry Filed under: Webdesign