Text below image on hover

Discussion in 'HTML' started by David Segall, Jan 17, 2006.

  1. David Segall

    David Segall Guest

    I have the usual flags to denote various languages in my page heading
    and I would like to provide the name of the language underneath them
    when the user has selected one or is hovering above one.

    The desired effect is illustrated here
    <http://www.oswd.org/design/preview/id/2083> except that the menu
    items, in my case, are images. That site achieves the effect by
    changing the display of the sub-text from "none" to "block" in the CSS
    for a and a:hover. How can I do the same thing for my images? My
    attempts, so far, have resulted in disappearing images and text in
    almost every place except where I want it.
    David Segall, Jan 17, 2006
    1. Advertisements

  2. David Segall

    Dylan Parry Guest

    Pondering the eternal question of "Hobnobs or Rich Tea?", David Segall
    finally proclaimed:

    Stop right there. http://www.cs.tut.fi/~jkorpela/flags.html
    Dylan Parry, Jan 17, 2006
    1. Advertisements

  3. David Segall

    David Segall Guest

    Your argument (I assume you agree) is basically "Don't use icons
    because they may be misunderstood and/or offend someone". It
    contradicts a thirty year history in the development of user
    interfaces but, of course, that does not mean that you are wrong.
    David Segall, Jan 17, 2006
  4. <style type="text/css">
    .icon { float: left; background-color: #000; }
    .icon A { text-decoration: none; }
    .icon IMG { border: 0; padding: 2px; }
    .icon SPAN { color: #fc0; padding: .2em; }
    .icon A:link SPAN,
    .icon A:visited SPAN { display: none; }
    .icon A:hover SPAN,
    .icon A:active SPAN { display: block; }
    .icon A:link,
    .icon A:visited { display: inline; }
    .icon A:hover,
    .icon A:active { display: block; }

    <div class="icon">
    <a href="english.html">
    <img src="english.jpg" alt="icon">
    <span class="caption">English</span>
    <div class="icon">
    <a href="spanish.html">
    <img src="spanish.jpg" alt="icon">
    <span class="caption">Spanish</span>
    <div class="icon">
    <a href="french.html">
    <img src="french.jpg" alt="icon">
    <span class="caption">French</span>
    Jonathan N. Little, Jan 17, 2006
  5. David Segall

    Dylan Parry Guest

    Pondering the eternal question of "Hobnobs or Rich Tea?", David Segall
    finally proclaimed:
    Just because a billion flies eat poo doesn't mean that it tastes good!
    Dylan Parry, Jan 17, 2006
  6. Then you haven't read the article properly.
    Take a look at http://www.google.co.uk/language_tools, for example.

    I won't say that everything that Google does is right, but this seems
    OK to me. The flags denote *countries*. The languages are denoted by
    their *names*.

    Any other interpretation of national flags is doomed, except in a
    limited number of special cases. But special cases are a poor
    starting point for anything that's meant to work in a WWW situation.
    Alan J. Flavell, Jan 17, 2006
  7. David Segall

    Neredbojias Guest

    With neither quill nor qualm, Dylan Parry quothed:
    Have you ever tried it?
    Neredbojias, Jan 18, 2006
  8. David Segall

    Dylan Parry Guest

    Pondering the eternal question of "Hobnobs or Rich Tea?", Neredbojias
    finally proclaimed:
    No. Have you tried my cooking? It doesn't taste good the first time
    round, so what makes you think it would the second?
    Dylan Parry, Jan 18, 2006
  9. David Segall

    David Segall Guest

    Can you suggest a way of reading the article "properly" without
    agreeing with it?
    I don't need to make that distinction on my site. In any case, nobody
    would recommend using any form of icons for such a large number of
    choices unless they were beside the names in a drop down list. It is
    not even consistent since it uses a drop down list to represent
    countries in one part and a page of icons in another.
    Icons are necessarily special cases. Jukka Korpela's article
    acknowledges the universal use of the Union Jack as an icon meaning
    English. It is used, not only on web pages, but in instruction manuals
    and airport lounges.

    Finally, I have to acknowledge that I have already lost this argument.
    Next time I am anxiously scanning the notices in a European airport I
    will have to look for a "flag" that spells out "en" instead of the one
    most English speakers recognise instantly.
    It is a triumph of misplaced logic and ethnic/national sensitivity
    over communication.
    David Segall, Jan 18, 2006
  10. You misrepresent him. Widespread, yes - he says "most commonly used"
    (as compared to other national flags, presumably), but "universal",

    My American colleague gets very upset about that, too, muttering dark
    imprecations about delusions of colonial grandeur, Boston Tea Party
    and such. Naturally, he'd use the stars and stripes to denote the
    language. And there's more of them, and they tend to have an even
    narrower view of international relations...

    And English is not the only indigenous national language spoken (and
    written) in the United Kingdom.
    If it amuses you to think so. Which language does the Indian flag
    represent in your universe, by the way?
    Alan J. Flavell, Jan 18, 2006
  11. David Segall

    dorayme Guest

    Now lets not be like that... I had a glance at my favourite
    human's article and I got the impression his arguments were at
    least worth taking seriously. To take up your previous point, one
    of his arguments was that flags were easily misunderstood or
    mismatched in relation to the language wanted. You can disagree
    with this, but you need to think about it. Your summing up of his
    article ("Don't use icons because they may be misunderstood
    and/or offend someone") does not inspire confidence you have.
    This does not mean you are wrong about using flags.
    dorayme, Jan 18, 2006
  12. David Segall

    Neredbojias Guest

    With neither quill nor qualm, Dylan Parry quothed:
    I expressed nor do now express no opinion one way or t'other. It was
    merely an admittedly wasteful human-interest question.
    Neredbojias, Jan 19, 2006
  13. David Segall

    David Segall Guest

    Thanks Jonathan. That worked perfectly after I realised I had a class
    called "caption". :)
    David Segall, Jan 19, 2006
  14. David Segall

    David Segall Guest

    Indeed they do, but all of them instantly recognize the Union Jack as
    the icon to choose if they want to be able to read some text. It's a
    good example of national sensitivity but not a good reason to drop the
    icon. If he is willing to accept the use of "America" as a synonym for
    the United States of America, ignoring the other 24 countries, then he
    can put up with using the Union Jack as the icon for the English
    That's a good example of misplaced logic. Thousands of Coca-Cola
    bottles are used to contain water but in its iconic form it represents
    That's another good example of misplaced logic. Because the Union Jack
    and the French flag are instantly recognised as icons for a particular
    language does not mean that all flags must have a meaning as icons for
    a language.

    An icon acquires a meaning of its own. The swastika has been used as a
    symbol for three thousand years but if you choose to put one on your
    web site you know how it will be interpreted. The same applies to the
    Union Jack and I think that makes it very useful. The fact that it
    happens to be the flag of a particular country is irrelevant.
    David Segall, Jan 19, 2006
  15. David Segall

    Jose Guest

    If it amuses you to think so. Which language does the Indian flag
    Well, let's come at it a different way. You have a website with the
    British, German, and French flags, representing English, German, and
    French. You then add pages for three of the languages commonly spoken
    in India - Kannada, Punjabi, and Tamil. What flag do you use for each
    of them?

    Use of icons sets up an expectation, and while it can be met in trivial
    cases, the expectation can fail when things get more complex, which is
    why the use of icons should be well thought out.

    Jose, Jan 19, 2006
  16. David Segall

    David Segall Guest

    I don't know which, if any, icons would be recognised as representing
    those languages. There is no reason to expect them to be flags. They
    might be an iconic map indicating the main area in which the language
    is usually spoken. If so, we can expect Indian bloggers protesting
    that they speak the language but don't live in the area or vice versa.
    My entire point is that, in the context of a web site, instruction
    manual or public sign the three European symbols you mention are not
    national flags; they are widely recognised icons that represent a
    Of course. And when the happy day comes and my web site is translated
    into the 5000 or so languages in the world I promise that I will not
    force a visitor to choose by clicking an icon.
    David Segall, Jan 20, 2006
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.