SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    best image replacement technique

    Hi there,

    Im trying to replace some text with an header image. I understand that the most semantic way of doing it is to do use the <span> element in conjunction with the <h1> selector, like this:

    <h1>welcome to solutions4<span class="toptitle"></span></h1>

    and then some css to indicate position etc.

    Im a little rusty, i havent coded in a while. Is this the best way to do it??

    Thanks

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see the need for a class on the span element, but apart from that it looks OK.
    Birnam wood is come to Dunsinane

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say yes - using a span allows the technique to degrade accessibly if images are off but CSS is on (i.e. if Tommy is visiting your site)...

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys! Thanks for the replies.

    The reason for using the class element is that there is more than one h1 title im replacing using an image and each image is different. If that makes any sense!

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that makes sense.

    Another option would be, unless you're using multiple H1s per page, would be to put an ID on the BODY element and use a contextual selector:
    Code:
    #top h1 span {background-image:...}
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're at all worried about IE5Mac then the span should be an <em> and it should go before the text: http://www.ryznardesign.com/web_codi...ent/index.html

  7. #7
    SitePoint Member
    Join Date
    Mar 2006
    Location
    Antwerp, Belgium, Europe
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mezzoblue has an overview of the best image-replacement techniques
    Peace,
    e-man


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
  •