July 23rd, 2004, 10:20 AM
|
|
Contributing User
|
|
Join Date: Sep 2003
Location: Norwich, UK
Posts: 43
Time spent in forums: 3 h 40 m 18 sec
Reputation Power: 5
|
|
|
Image Replacement Technique
Hi all,
I quite often find myself frustrated when trying to optimise a site, by the number of graphical heading which are used, when a <h1> heading could be used which much better effect.
After having a little mess around, I've found that there's an easy way using CSS that you can use your <h1> heading which search engines (and people requiring accessible websites) will love and still show the graphical headings to keep the same look of the site.
Basically, you nest the text in a <span> inside a <h1> like this:
Code:
<h1 style="background-image:url(title.gif);width:200px;height:20px;"><span style="display:none;">title</span></h1>
When doing this for real, I'd put the style declarations in a stylesheet rather than declaring them inline. For my an example, I've recently applied this technique to a website I'm working on. The url is http://www.sec-online.co.uk/.
Has anyone else got any techniques for making textual images more accessible/search engine friendly?
Cheers,
John Levermore
http://www.johnlevermore.com/
|
Dev Shed Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
