SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    SitePoint Enthusiast AndrewDay's Avatar
    Join Date
    Jan 2004
    Location
    Seattle, WA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The Perfect Image Replacement

    I just posted this over at my blog and thought it would be useful to you all:

    I just re-implimented a new version of image replacement which I stole from MezzoBlue. It makes it so that the banner is inserted via CSS and is a link. For those of you who don't know, the advantage of an image replacement is that it boost your search engine ratings because search engines value <h?> tags more then any other tag save for the <title> tag. Also, it leaves your (X)HTML to be more about the content and less about design which is always preferable. There are more advantages for image replacement, but that's a subject for another time. Here some example code of the "perfect" image replacement in action:

    CSS:

    h1 {
    margin: 0;
    padding: 0;
    }

    #pageHeader h1 a:link, #pageHeader h1 a:visited {
    background-image: url(images/banner.jpg);
    width: bannerwidth.px;
    height: bannerheight.px;
    margin: 0;
    display: block;
    }

    #pageHeader h1 span, #pageHeader h2, #pageHeader h3 {display: none;
    }

    HTML:

    <div id=”pageHeader”>
    <h1><a href=”/”><span>Page title</span></a></h1>
    <h2><span>Description</span></h2>
    <h3><span>Copyright Info (I deleted this line)</span></h3>
    </div>
    Last edited by AndrewDay; Mar 21, 2004 at 18:08.
    Kempt - Few things in life are that good.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Thanks for sharing

    A few questions :

    1) What's this commented out section for?
    Code:
    /*#pageHeader h1 a:link, #pageHeader h1 a:visited {
    background: #fff url(images/banner.jpg) top left no-repeat;
    width: bannerwidth.px;
    height: bannerheight.px;
    margin: 0;
    display: block;
    }*/
    It seems to be almost a duplicate of the code that follows. This may confuse some people who think that this code always has to be added

    2) Why the span in these 2?
    Code:
    <h2><span>Description</span></h2>
    <h3><span>Copyright Info (I deleted this line)</span></h3>
    You are turning the h2 and h3 off with display:none so the span seems unnecessary. Unless you meant to add the span here #pageHeader h2 span.

    If you are hiding the h2 and h3 and they are merely there to provide text that you hide then this may be considered spamming.

    3)What makes this perfect and different from other image replacement techniques - just so we know

    I'm not picking holes in it on purpose, just trying to make it clear to other people before they use the techniques

    Still thanks for sharing it with us.

    Paul

  3. #3
    SitePoint Enthusiast AndrewDay's Avatar
    Join Date
    Jan 2004
    Location
    Seattle, WA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the good part about it is that it is readable in screen readers and includes a banner link. I'm looking into why you do the two other things you mentioned right now... i think it's because some browsers are stupid but maybe not.
    Kempt - Few things in life are that good.

  4. #4
    SitePoint Enthusiast AndrewDay's Avatar
    Join Date
    Jan 2004
    Location
    Seattle, WA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i've decided the extra CSS isn't needed.... it might be something for IE 5.1 or something like that but who cares?
    Kempt - Few things in life are that good.

  5. #5
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    Quote Originally Posted by AndrewDay
    i've decided the extra CSS isn't needed.... it might be something for IE 5.1 or something like that but who cares?
    Hi Andrew,
    Can we conclude you copied this CSS from somewhere else? ;-)
    I mean, if you wrote it, you surely would know what it was there for..

  6. #6
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AndrewDay
    the good part about it is that it is readable in screen readers
    It is my understanding that most screenreaders don't read out elements that have 'display:none' set on them.

    Also, like all image replacement techniques that I have seen, with images off and CSS on, nothing will be shown, not even an alt tag. For this reason alone I'm staying clear of it so far.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    this is David Shae we're talking about! He is a css god
    Aren't we all lol

    Quote Originally Posted by Zoef
    Also, like all image replacement techniques that I have seen, with images off and CSS on, nothing will be shown,
    I like a challenge

    10 mins later..............

    How about this one then?

    Works with images off and css on. Works with css off and images on. Doesn't even attempt to hide the text or move it sideways. Just leave it where it is and cover it up with a background image in the anchor (or span if you don't need a hyperlink).

    http://www.pmob.co.uk/temp/headerreplacement2.htm

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    h1 {
    height:40px;
    width:400px;
    position:relative;
    }
    h1 a {
    background: transparent url(images/pob.gif) no-repeat left top;
    position:absolute;
    left:0;top:0;
    display:block;
    height:40px;
    width:400px;
    }
    </style>
    </head>
    <body>
    <h1>This is the header text<a href="http://www.pmob.co.uk/faqcss" title="This is the header text"></a></h1>
    <p>Turn images off and the header text will appear</p>
    </body>
    </html>
    Just make sure the banner is big enough to hide your heading text.

    I find it amusing that people cobble together some css and then say that they've just invented the wheel when a lot of us use these techniques daily without giving fancy names to them.

    I'm going to call my version. MEOIRLOL (My Example Of Image Replacement LOL)

    Paul (tongue in-cheek)

  8. #8
    SitePoint Enthusiast AndrewDay's Avatar
    Join Date
    Jan 2004
    Location
    Seattle, WA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun
    Hi Andrew,
    Can we conclude you copied this CSS from somewhere else? ;-)
    I mean, if you wrote it, you surely would know what it was there for..
    if you would have read

    I just re-implimented a new version of image replacement which I stole from MezzoBlue.
    but thanks for trying to make me look like a fool... always appreciated.
    Kempt - Few things in life are that good.

  9. #9
    SitePoint Enthusiast AndrewDay's Avatar
    Join Date
    Jan 2004
    Location
    Seattle, WA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    Also, like all image replacement techniques that I have seen, with images off and CSS on, nothing will be shown, not even an alt tag. For this reason alone I'm staying clear of it so far.
    incorrect... with CSS off it shows the <h1></h1> content so you make the <h1> the title of you site because w/o the css the browser doesn't know to make them not display!
    Kempt - Few things in life are that good.

  10. #10
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Andrew, his point was that if CSS is turned on then it will try to replace the text with an image, but if images are disabled then nothing will be shown to the user, not even the text. Often when I am downloading something (56k here) I will turn off images so that I can view sites a lot quicker, and this would leave me with ummm, nothing. I would have to agree with him, that's enough reasoning to avoid using image replacement.

    If your main reasoning to do this is for search engine optimization then you could just put an <h1> at the very top of the page and hide it with CSS. I have done this on my site Everything Capcom (link in signature), and I unhide the H1 and hide the header image when the page is being printed. This way, I get the SEO benefits and give my users an effecient printer-friendly version. Just a thought.

  11. #11
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AndrewDay
    but thanks for trying to make me look like a fool... always appreciated.
    I think you missed my squinty-eye smilie in there :-)

    But, when boldly call this code the 'perfect image replacement' you should expect people inspecting your code.

  12. #12
    SitePoint Enthusiast AndrewDay's Avatar
    Join Date
    Jan 2004
    Location
    Seattle, WA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun
    I think you missed my squinty-eye smilie in there :-)

    But, when boldly call this code the 'perfect image replacement' you should expect people inspecting your code.
    I'm sure that all the code is neccesary.... this is David Shae we're talking about! He is a css god

    BUT it doesn't logically seem neccesary to me but I'm naive about this kind of stuff.
    Last edited by AndrewDay; Mar 22, 2004 at 15:20.
    Kempt - Few things in life are that good.

  13. #13
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will the real CSS god please stand up?

    You should be writing for alistapart, Paul.
    Quote Originally Posted by Paul O'B
    Just make sure the banner is big enough to hide your heading text.
    Just thinking here... One could experiment with defining heights and widths in em's, keeping the aspect ratio and maybe oversizing the banner graphic somewhat. Might also want to have the body's font-size set in px (to have a 'fixed' relationship betweeen px and em's).
    Quote Originally Posted by Paul O'B
    I'm going to call my version. MEOIRLOL (My Example Of Image Replacement LOL)
    Nah, just call it perfect .
    Off Topic:

    Building an altar. Can I have a strain of your hair, Paul?


    Rik (tongue very firmly in cheek indeed)
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  14. #14
    SitePoint Enthusiast AndrewDay's Avatar
    Join Date
    Jan 2004
    Location
    Seattle, WA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I thought about doing something like your arrangement but I figured that therir must have been a reason that no one has suggested that... Great idea though I'll try it out...

    Andrew
    Kempt - Few things in life are that good.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rik
    Just thinking here... One could experiment with defining heights and widths in em's, keeping the aspect ratio and maybe oversizing the banner graphic somewhat. Might also want to have the body's font-size set in px (to have a 'fixed' relationship betweeen px and em's).
    Good idea - it will keep it hidden if text is resized etc

    Will the real CSS god please stand up?
    Why is everybody standing up lol

    Quote Originally Posted by Andrew
    Great idea though I'll try it out...
    Feel free to experiment and improve it. After all it's only CSS

    Paul

  16. #16
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Image Replacement dead

    Fitting for this topic is the latest scripting blog entry from Simon Willison.
    http://www.sitepoint.com/blog-post-view.php?id=159732

    He talks about SxSW Interactive, and Doug Bowman announcing image replacement as dead.

    Simon writes:
    Although designed to improve accessibility, the technique actually has the opposite effect thanks to many screen readers ignoring text that has been set to display: none in the CSS. Joe Clark's article in A List Apart from last year has the full technical details.
    Various other image replacement techniques have sprung up to replace FIR, but so far every one of them has the distinct disadvantage of rendering content completely invisible for users with images turned off in their browser.
    And then concludes:
    My recommendation is to avoid image replacement techniques unless the usability of the site is not hugely affected by the replaced text not being visible at all. Unfortunately this rules the technique out in most cases. Remember though, from an accessibility point of view an image with a properly chosen alt attribute is just as accessible as plain HTM text!

  17. #17
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doug's presentation is available online too
    http://www.stopdesign.com/present/sxsw2004/goodbad/

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi junjun,

    Thanks for the links 2 two of the worst presented sites I've seen

    SxSW Interactive,

    What monitor was that designed for 3000px x 3000px ? What an earth's going on there.

    Also:

    http://www.stopdesign.com/present/sxsw2004/goodbad/

    Opening splash page - couldn't find any navigation!!

    Clicked everything on the page twice and nothing happened. Then I noticed a faded out gif in the top right corner that was barely visible under the layer of dust on my screen.

    This leads to , wait for it, a blank page! Had to refresh page before anything appeared. This seemed to happen all through the site.

    If people are to write off techniques due to their lack of accessibility then they should put their own houses in order first I think lol.

    techniques have sprung up to replace FIR, but so far every one of them has the distinct disadvantage of rendering content completely invisible for users with images turned off in their browser
    Not true with my example .

    I'm not a fan of image replacement techniques to replace every heading etc but I can see that some designers will like the choice of presenting something more appealing than standard text.

    If it works with images off then I think its fair to use it.

    Paul (still tongue in cheek)

  19. #19
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    What an earth's going on there.
    lol, don't look at me, I'm only giving you a link to the goods ;-)

    Quote Originally Posted by Paul O'B
    If it works with images off then I think its fair to use it.
    I won't argue with you, people have different view on which techiques are 'ok' to use and which are not. I've never liked techniques that are not meant for the browser/user but solemnly for the search engines.
    Yours seems to degrade gracefully tough, which actually makes it a little different.

    At least there's light in the tunnel with CSS3, but God knows how long it would take for enough users to switch once css3 is a recommendation and browsers have started supporting it.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    [quote-junjun]
    lol, don't look at me, I'm only giving you a link to the goods ;-)
    [/quote]


    I've never liked techniques that are not meant for the browser/user but solemnly for the search engines.
    I agree that it would be wrong in that case as I think we should make the pages for people first. I don't agree with doing unnecessary things just for search engines either. If it's right for the page and the visitor should be the most important point.

    Of course everything is open to abuse and if people can spam a few more keywords in then they will try and do it lol.

    I think replacing all headings with images is a bit over the top but if you want a banner heading then you may as well use an image replacement like the one above) because you are providing the banner (as per normal) and also text for screen readers. If images are turned off everyone gets the text.

    At least there's light in the tunnel with CSS3
    I'll be too old by then lol

    Paul

  21. #21
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Came across this today and I thought I'd add it to this thread: http://www.mezzoblue.com/tests/revis...e-replacement/
    It gives an overview of all image replacement techniques known to man at this point in history.

    Btw, Paul, the "Gilder/Levin Method" mentioned on that page is very similar to what you cooked up.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  22. #22
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AndrewDay
    it boost your search engine ratings because search engines value <h?> tags more then any other tag
    which is why, if it's a title, i often do
    Code:
    <h1><img src="blah.jpg" alt="the text of the image" /></h1>
    Paul, i like your idea of covering the text up with a background image...the only problem comes when you want/need the background of that element to be transparent - for whatever reason. good stuff nonetheless
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Rik
    Btw, Paul, the "Gilder/Levin Method" mentioned on that page is very similar to what you cooked up.
    Great minds think alike lol

    As I've been saying for some time, it's only CSS and some of us have been using techniques like this (and others) without giving silly names to them.

    Perhaps we should invent names for every css command statement

    I've got one......... #pob {color:red}

    I'm sorry but no-one else is allowed to use my method above without my permission lol. The colour red is now mine forever.

    Quote Originally Posted by redux
    Paul, i like your idea of covering the text up with a background image...the only problem comes when you want/need the background of that element to be transparent - for whatever reason. good stuff nonetheless
    Thanks Redux, and I agree that it is a drawback (or could it be a feature of the method if transparency is required.

    Paul

  24. #24
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Canada
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info, it's very useful!

  25. #25
    SitePoint Member
    Join Date
    Aug 2004
    Location
    NH USA
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Ok stupid Question

    Ok paul stupid Question.

    Why does the link show up on the text and the image when the link tag is not surrounding anything???

    I don't understand why this works but i have needed it for a while!!!

    Thanks

    RAKESS

    OK Now i do feel stupid i just figured that one out but is there a way to have images and CSS turned off that the link is still there?


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
  •