View Full Version : Using FIR with hyperlinks

10-11-2004, 09:32 PM
I want to use the FIR (Fahrner Image Replacement) technique but I'm having problems getting it to work with hyperlinks. It works, but it doesn't validate because I've placed the hyperlink (inline) wrapped around the div (block) that holds the image.

<a href="blabla.htm">
<div style="width:200px; height:200px; background-image:url(/bla.gif);

Has anyone been able to use FIR for hyperlinks and get it to validate correctly? :o

10-11-2004, 09:39 PM
I use a different method than that -- but the reason it does not validate, is I believe you should be using a span, not a div. My method is easier, but does not work on 5.0 or under browsers:

<h1><a href="index.html">This is my graphical header</a></h1>


h1 a {
background: transparent url(images/myheader.jpg) no-repeat top left;
width: 300px;
height: 100px;
text-indent: -5000px;

I use that on all my sites now, you can check it out on my home page (http://www.dotfive.com) (the images above the text at the bottom use FIR and the logo does as well) or the recent one I did for my neice (http://www.alexisbarbosa.com)... and pretty much all of my older ones if you want.

One of our members here, MindlessLemming, uses your technique on his personal site (http://www.leftjustified.net/), you might want to email him or wait for his response:)

10-11-2004, 09:39 PM
and, so you have it, here's all the different ways to do image replacement:

10-11-2004, 10:20 PM
Thanks :D I changed the code so it was

<h1><a href="blabla.htm">link</a></h1>

and tried the following code

h1 a{

... but nothing appears in IE6 and in Netscape I get a background that displays as much width as L-I-N-K. If I replace my original div with a span, nothing appears at all :o

The idea I'm trying to accomplish is to have user-selected styles (different backgrounds, etc.). I wanted to make different images for each category title and give the image url in each individual stylesheet. One style sheet might have an image with the text of "Hello" and another might display "Goodbye" at the same location on the page using a different style sheet.

At least that's my goal :D

now that I think about it... I probably could do the same thing with php...

<img src="$stylesheet.png'>

Perhaps that's the direction I need to lean in :p

10-11-2004, 10:43 PM
No, you're getting it -- As far as the background is concerned, you need to define a position:

h1 a{
background: transparent url(image.png) no-repeat left top;
text-decoration: none;

forgot about the text decoration. Make sure your image name is correct (is it image.png or is it bobsphoto.png or is it in images/bobsphoto.jpg, whatever).

If it still doesn't work, show me a link to your site, or the full code and images and I'll give it a go.

10-11-2004, 11:57 PM
I prefer the Radu method:


10-12-2004, 12:46 AM
Thanks for the tips :D

After doing some pondering I decided to move in the direction of a php-based img tag instead of FIR; If I was ever planning to redesign the site than FIR would be my ticket. This site in question will never need a redesign (I just need it to get the data online for my intended audience), so having hard-coded images will work just fine. I've implimented A List Apart's php selector and coded my img tags to push out "$style"_img.png urls.

So far all is working as intended :thumbsup:

10-12-2004, 02:54 AM
I eventually decided that there is no need to play with "this one covers these circumstances, while that one covers this... all with several caveats" since there is nothing invalid in any way about:

<h1><a href="#foobar"><img src="foo.gif" alt="Foo" /></a></h1>

And if you want to split hairs, this takes no additional CSS and a minimal amount of markup beyond those image replacement techniques. Not to mention completely accessible, blind or not, images or none, styling or scripting be damned...

Basically I admitted that while individuals most certainly overthink things, this behavior is not excluded from groups or entire fields of work.

It's not worth the hassle, kids.

10-12-2004, 03:55 AM
Since the logo is part of the content, your way is also right. The reason why I tend to use FIR is the fact that I will:
1) most likely have someone else update it later, and rather them deal with one document, but that's meanial
2) Use style sheet switcher, or am planning too

That's about it. And others have their reasons as well I would imagine.

10-12-2004, 04:01 AM
Yes, I believe your #1 is indeed rather menial. #2 is a good point, though, and one I'd not considered.

The technique *is* overrused and, more to the point, misused often enough to remind people that the <img /> element is valid and has many values which of course outnumber the one or few including use of styleswitchers.

But yes, well met. :)

10-12-2004, 01:12 PM
Image replacement was more intended for people wanting to use fancy fonts/graphics for other h* elements, while still being printable in their basic plaintext form. Using the image for the logo isn't wrong, and people do it all the time :p And the Radu method uses no additional markup. Heh.