Eureka! CSS on, Images Off
I decided to go with a transparent gif at the top of each page. I do this on all my sites anyway so I can make the logo a link to the home page. So, I just gave some style to the alt text that appears when the images are turned off.
The HTML looks like this:
<div id="headbox" > <a href="index.html"><img src="images/transparent.gif" alt="Company Name" /></a> <h1>Company Name</h1> </div>
And here is the CSS:
#headbox img
{border: none;
/*make the transparent gif the same size as the company logo */
width: 800px;
height: 100px;
/*make sure the alt text font can be seen on the background */
color: #f7f7f0;
/*make it look like a header*/
font: bold 24pt "Times New Roman", Times, serif;}
#headbox h1
/*hides the real header for CSS completely off*/
{display: none;}
The Pros:
- It’s easy to make a transparent gif.
- No hacks or extra markup for certain browsers.
- Minimal coding.
- Great flexibility when changing the overall look of the site.
The Cons:
- The H1 is invisible to search engines.
- I’m surprised that I can’t think of any more cons. I must be tired.
The result is pretty cool. Here is images off:
Here is images on:
Images make a dramatic difference in the overall feel of the website. And I suppose it could go either way (good or bad). I’m going to start using more images (and preparing for images off with my solution). I don’t know if anyone else has tried this, but I’m going to give it a snappy name. Like “the covert gif.” I never tried the Campaign Monitor’s solution. I’m sorry Matt.
Mike Foley on Rally for the Republic
Jenn on What’s in my purse?
karen on Goober is Über Good.
Carol on What’s in my purse?
Hey, I don't want this picture. What gives?
WTF?