Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Sep 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Using FIR with hyperlinks

    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.

    Code:
    <a href="blabla.htm">
    <div style="width:200px; height:200px; background-image:url(/bla.gif); 
    background-repeat:no-repeat;">
    </div>
    </a>
    Has anyone been able to use FIR for hyperlinks and get it to validate correctly?

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <h1><a href="index.html">This is my graphical header</a></h1>
    with:
    Code:
    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 (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... and pretty much all of my older ones if you want.

    One of our members here, MindlessLemming, uses your technique on his personal site, you might want to email him or wait for his response
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #3
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    and, so you have it, here's all the different ways to do image replacement:
    http://www.mezzoblue.com/tests/revis...e-replacement/
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #4
    New to the CF scene
    Join Date
    Sep 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks I changed the code so it was

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

    and tried the following code

    Code:
    h1 a{
    	width:290px; 
    	height:50px;
    	background-image:url(image.png);
    	background-repeat:no-repeat;
    	text-indent:-5000px;
    }
    ... 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

    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

    *edit*
    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
    Last edited by ChocoboBop; 10-11-2004 at 10:27 PM.

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, you're getting it -- As far as the background is concerned, you need to define a position:
    Code:
    h1 a{
            width:290px; 
            height:50px;
            background: transparent url(image.png) no-repeat left top;
            text-indent:-5000px;
            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.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #7
    New to the CF scene
    Join Date
    Sep 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the tips

    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

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 And the Radu method uses no additional markup. Heh.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •