SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image replacement hypothetical

    Let's say I have an <h1> I want to use image replacement on, so assume I have some cutesy graphic that fits the design better than some basic styled text.

    But I also want to adhere to the convention of having my logo be a clickable link back to the index.htm page (or what have you).

    Is there a way to use both an image replacement technique and have a clickable link? Or do i need to resort to an image, inside a link, inside the h1?

    Is there a semantically sound practice here?


    For the sake of giving the question a context, I was viewing HTMLDog.com when this crossed my mind. I noticed Patrick is using an image inside a <p id="logo"> element. View any page but the home page and you'll see the <a> tag as well.

    Oh...and while I'd prefer not to use sIFR here, I'm not totally adverse to it but I'd love to hear pros and cons if this is the case.

    EDIT: And for the benefit of semantics, it seems important to me to use an <h1> or similar for the heading, as opposed to Patrick's choice of <p id="logo">.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hi, the two best image replacement techniques are here and here. They each work in all conceivable situations.

  3. #3
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand the first one...using the positioning to sit the image on top of the actual text which is obscured underneath.

    Is the second one working by setting the stacking order of the <b> tag to -1, therefore putting it under the background? Is that one well supported?

  4. #4
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And both require the non-semantic element, right?

    So no perfect solution to quote Paul...

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    candlebain,

    to this day, there's no perfect image replacement technique for text.
    You have two great samples posted by EricWatson. However, they require extra markup. You have to weigh out your own set of principles; what is more important to you? Clean, perfectly semantic code? That would disqualify most techniques.

    If your main principle is to have clean code, then there are other image replacement techniques. Those, however, will not work with either CSS or images turned off, which in turn will result into accesssibility issues.

    Here's a comparison list of a few techniques that aims to denote the pros and cons of CSS image replacement techniques. (note: Paul's and Eric's more modern solutions aren't listed)

    As for sIFR... The main problem with sIFR is its performance overhead and, of course, it requires Flash to be installed on a user's computer. Not only do some people not have Flash installed; some people have Flash installed but block it. The results can be quite nasty.

    There are other Javascript/Flash techniques, some of which are listed and compared in these articles:

    http://stackoverflow.com/questions/6...vs-typeface-js
    http://thinkclay.com/technology/cufon-sifr-flir
    http://cssvault.com/blog/2009/07/29/...cejs-and-flir/

    Personally, I do like clean, semantic code, but I am also aware of the shortcomings of CSS and HTML, so I'll use non-semantic hooks now and then, if I consider them tolerable for a given project.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestions guys. It's what I figured and I've used similar solutions. It was my hope that a "better" solution was available...but of course, I'm pretending to be a purist.

    I appreciate the insights though and will probably implement one of Eric's solutions.

    Thanks!

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Yeah, Paul and Eric's solutions are what I'd go for as well, if the need arose.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

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