Re: [WSG] RE: Image replacement techniques for linked elements

[James Ellis]

Peter Ottery wrote:
these are still linked. the actual (non graphic) heading is just using the
technique [1] of making the font size 1px and white (so its not visible on a
white page) leaving the background image visible. the link that contains the
heading is given a width & height and display:block like your example so
that the link "hotspot" is forced to stay big enough and cover the desired
area.
That has worked for us pretty well. Haven't had any complaints about weird
display or anything....
 

Peter
Sorry to be a party pooper but in Firefox, I have my minimum font-size 
set to 12px, so websites can't set text I can't read (or see for that 
matter) - like 6px :D. I think this is rendering your plain text headers 
to be 12px - and they are appearing over the image headers on the  
smh.com.au home page ... making both types of headers unreadable.

What I've done is probably not done often but it is worth considering. 
Firefox ships with its minimum font size turned off.

I've done this on one of our new websites (text changed to make more 
sense in this context), and it works quite well with images turned off 
or on. Or am I missing the point of image replacement techniques?

  <h1><a href="/sport/" title="link to the sport page"><img src="/images/imagethatsayssport.png" height="60" 
width="470" alt="sport" /></a></h1>
Works for the graphical browsers and text browser, not sure how it works 
with search engines, though.

Cheers
James
******************************************************
The discussion list for  http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************