Should I use an image map to build my header?

Discussion in 'Web Design' started by tobenn, May 31, 2012.

to remove all ads.
  1. tobenn

    tobenn New Member

    Messages:
    3
    Hi everyone,
    should I build my header as an image map?
     
  2. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    Nope......
     
  3. tobenn

    tobenn New Member

    Messages:
    3
    So should I just make a div and put my <img> and <ul>(navigation) in it?
     
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Sure should
     
  5. tobenn

    tobenn New Member

    Messages:
    3
    That I shall do! Thanks fer yer help!
     
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    And the reasons why not are?
     
  7. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Well, if you're building websites in 1997, I guess there's no reason not to.

    Aside from that, you're talking bloated code, large image downloads, a pain in the ass to update, and no navigation whatsoever if the image fails to load.
     
  8. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    Yep... this one
     
  9. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
  10. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    LOL. That's pretty funny. One article's date just shows up as "pre 2006" and the other 2 are about using CSS to replace image maps, including the ALA article from 2003!. So, I guess maybe not 1997, but grossly out of date for sure.

    EDIT: Upon reading the "pre 2006" article further, it's also about creating an imagemap-type effect using CSS.
     
    Last edited: Jun 1, 2012
  11. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
  12. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    Certainly but it does not mean that image maps should be subject to the same designer/developer "snobbery" as frames or tables are, or how XHTML is what all document should be using.

    Image maps serve a purpose and to not use them simply because it's "old hat" actually goes AGAINST the "semantic coding" philosophy, where the object of the exercise is to use the correct concept (or element) for the purpose it was intended.
     
  13. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    You aren't entirely wrong on your point. Remember, though that also under the idea of semantics that content, display and interaction should be separated. Image maps don't separate content and display. In fact, they put both content and display in HTML and make interaction much more difficult. It isn't "snobbery", as you put it. It's a well thought out position based on the same best practices you subscribe to...perhaps delivered with just a slightly snobbish undertone. ;)
     
    Last edited: Jun 2, 2012
  14. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,662
    Yes, I accede on that, perhaps the snobbery is implied rather that any real "one upmanship" attitude.
     
  15. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    speaking of semantic coding and separating content and style. I'm a little perplexed with a situation such as
    HTML:
    <h2></h2>
    
    Code:
     h2:before { content: 'Header 2'; }
    
    Clearly this is content within CSS, and although I can see some usage benefits of doing so, is it actually wise to do this?
     
  16. CaldwellYSR

    CaldwellYSR Member

    Messages:
    658
    The only use I've found for :before and :after is clearing floats with the :after one...
     
  17. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    The idea is to use it for content that is part of the display. Sounds like an oxymoron, but it isn't. In your example, if you're "styling" a level 2 header with the label "Header 2", then it would be a valid usage.

    Also, consider this example site I made some time ago: http://roedesigns.com/clients/emily/

    The branches on either side of the nav are :before and :after (except in IE, for which there are conditional comments that place them there). It's content, yes, but used for display purposes.

    The question I have is about some of the new CSS3 effects. Many if not most are used solely for interaction, which should be JS...
     
  18. Brian Angel

    Brian Angel Member

    Messages:
    248
    Yeah, thought crossed my mind on those but hey, I DO like the fact that some of the interactions will be still working if someone has javascript turned off, its a nice fallback.
     

Share This Page